Explicador de Perros y gatos
Objetivo de este acertijo: Usar JavaScript para crear un botón y agregarlo a una página web.
Tutorial de la solución:
En este acertijo, usarás el método createElement, la propiedad textContent y el método appendChild para crear un botón y agregarlo al cuerpo del documento.
Para completar el acertijo, crea una variable llamada dogButton
que almacene un nuevo elemento de botón usando document.createElement('button')
. Luego, define .textContent
de dogButton
como un string. Por último, anexa el elemento dogButton
a body
.
Para completar el acertijo, crea una variable.
Solución del código de ejemplo:
(Pulsa a continuación para revelar)
JavaScript
let title = document.createElement('h1');
title.textContent = 'Cuteness';
let catImg = document.createElement('img');
catImg.src = '../../static/images/greyTabby.jpg';
let catButton = document.createElement('button');
catButton.textContent = 'Click Here!';
let dogImg = document.createElement('img');
dogImg.src = '../../static/images/couchDog.jpg';
let dogButton = document.createElement('button');
dogButton.textContent = 'Or Here!';
document.body.appendChild(title);
document.body.appendChild(catImg);
document.body.appendChild(catButton);
document.body.appendChild(dogImg);
document.body.appendChild(dogButton);
Conceptos de HTML: <h1>
, <img>
, <button>
Conceptos de JavaScript: .textContent
, .createElement()
, document body, .appendChild()
, variables