Button Up explainer

Aim of the puzzle: Add an event listener to a button that changes the button’s text when the button is clicked.
Walk through of solution: JavaScript can be used to add event listeners to HTML elements.

Event listeners wait for a specific event, for example, 'click' (a full list of events can be found here), and then run a callback function when that event occurs.

In this puzzle, we are adding an event listener to both button1 and button2 that waits for the 'click' event. When the button is clicked, the callback function changes the .textContent property (which stores the text of the element), to 'Clicked!'.

Sample code solution:

JavaScript

let button1 = document.getElementById('button1');

button1.addEventListener('click', () => {
    button1.textContent = 'Clicked!';
});

let button2 = document.getElementById('button2');

button2.addEventListener('click', () => {
    button2.textContent = 'Clicked!';
});

Javascript Concepts: Document Object, document.getElementById(), .addEventListener(), Events, Event Listeners, .textContent

what’s the problem in it?

Hey there,

It looks like there is a small typo in textContent. Fixing that should solve the puzzle.

Hope this helps!
Ben

@Grasshopper_Ben thanks :blush:

I don’t see my problem in this code.

Hey there, I see 2 issues:

First, change getElementByID to getElementById (lower case d). JavaScript is case sensitive, so correct capitalization is important.

Then, in your event listener, change button1.textContent to button2.textContent.

Hope this helps!
Ben

I dont see the flaw in my code could I have some pointers???

Hey there, I removed the screenshot from your post as it had your email address visible.

The issue however was that you had incorrect capitalization of textContent and addEventListener. JavaScript is case-sensitive, so textContent and textcontent are not the same thing.

Hope this helps!
Ben


Why does this problem happen?

Hey there, that looks like a bug on our end. Try submitting a bug report by tapping the 3-dot menu next to “Guide” and clicking “Send Feedback”.

In the meantime, trying the puzzle on a different browser might get you past the problem.

I’m not so sure what happened here, can you help?

Hey there, looks like there are some typos on lines 8 and 9.

Also, remember that you want to add the event listener to button2 on line 8

Good luck!
Ben

PLEASE WHATS THE PROBLEM WITH THIS COD E

Hey there, try changing .textContext to .textContent.

Also, try moving the }); after 'Clicked!'; down to line 10, so it looks like this:

button2.addEventListener('click', () => {
    button2.textContent = 'Clicked!';
});

This last part isn’t necessary to complete the puzzle, but good formatting is the key to readable code!

Hope this helps,
Ben

2 Likes

Cant seem to see what is wrong with my code, please help!

Hey there, try changing button.textContent to button2.textContent.

Hope this helps!
Ben

Help

Thank you! It was the button2 I forgot, surprised I didn’t spot it!

Hey there, looks like a small typo. Change .textContant to .textContent