Pet of the Month explainer

The aim of this puzzle: Add an event listener to a button that changes its text when the button is clicked.

Walkthrough of the solution: Event listeners wait for a specific event, for example, click , and then run a callback function when that event occurs.

In this puzzle, you’ll add an event listener to button so its text changes to 'voted' when it’s clicked.
To complete the puzzle, attach .addEventListener() to button. Set the first argument inside the parentheses () to 'click'.

Set the second argument inside the parentheses () to an arrow function. Inside the code block {} of the arrow function, set the .textContent of button to 'voted'.

Sample code solution:
(Tap below to reveal)

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);

HTML Concepts: <button>
JavaScript Concepts: .textContent, .createElement(), document, body, .appendChild(), addEventListener method, Arrow Function

Hello, I am having a problem with this coding here, it’s not letting me progress.
Thank you, whoever will answer.
notworkingcode

[Deleted because I figured it out]

Hey there, looks like there’s a small typo. Change textContext to textContent, and the puzzle should complete.

Hope this helps!
Ben

1 Like

help

Hey there, if you hover over the red x, you’ll see it whining about a ). See if that helps you figure out the problem!

I’d like to get you to the point where you can help yourself through issues with typos or syntax errors. If you’re still stuck, let me know, and I’ll be happy to help you!

Good luck!
Ben

@grasshopperexplainer
I am attaching a 4 screenshots
Of the import works in Javascript

1 ) HTML FILE

2 ) main.js file where the import is used

3) the user.js file which is exported to main.js file

4) result file in the browser

my puzzle is not complete
thanks

–Yash