Pet Of The Month es-419 Explainer

Explicador de Mascota del mes

Objetivo de este acertijo: Agregar una escucha de eventos a un botón que cambie su texto cuando se haga clic en él.

Tutorial de la solución: Las escuchas de eventos esperan un evento específico, por ejemplo, click, y luego ejecutan una función de devolución de llamada cuando ocurre ese evento.

En este acertijo, agregarás una escucha de eventos a button, para que su texto cambie a 'voted' cuando se haga clic en ella.
Para completar el acertijo, adjunta .addEventListener() a button. Define el primer argumento dentro del paréntesis () como 'click'.

Define el segundo argumento dentro del paréntesis () como una función de flecha. Dentro del bloque de código {} de la función de flecha, define .textContent de button como 'voted'.

Solución del código de ejemplo:
(Pulsa a continuación para revelar)

import { puppyProfile } from 'animals.data';

let title = document.createElement('h1');
title.textContent = 'Pet of the Month';

let dogName = document.createElement('h2');
dogName.textContent = puppyProfile[0];

let img = document.createElement('img');
img.src = puppyProfile[1];

let description = document.createElement('p');
description.textContent = puppyProfile[2];

let button = document.createElement('button');
button.textContent = 'vote';

button.addEventListener( 'click', () => {
    button.textContent = 'voted';
});

document.body.appendChild(title);
document.body.appendChild(dogName);
document.body.appendChild(img);
document.body.appendChild(description);
document.body.appendChild(button);

Conceptos de HTML: <button>
Conceptos de JavaScript: .textContent, .createElement(), documento, cuerpo, .appendChild(), método addEventListener, función de flecha