Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript and the DOM (Retiring) Responding to User Interaction Adding an Event Listener

Henry Garmendia
PLUS
Henry Garmendia
Courses Plus Student 11,762 Points
Posted by Henry Garmendia
Henry Garmendia
Courses Plus Student 11,762 Points

Challenge Task 1 of 3 Select the button with the ID "makeItRed" and assign it to the button variable.

I don't understand why is not letting me select the ID with

let button = document.getElementById('makeItRed'); or let button = document.querySelector('makeitRed');

what am I doing wrong, can anyone please help?

app.js 
const warning = document.getElementById("warning");
let button = document.querySelectorAll('button');
index.html 
<!DOCTYPE html>
<html>
    <head>
        <title>Adding an Event Listener</title>
    </head>
    <link rel="stylesheet" href="style.css" />
    <body>
        <div id="warning">
            Warning: My background should be red!
        </div>
        <button id="makeItRed">Make It Red!</button>
        <script src="app.js"></script>
    </body>
</html>

8 Answers

Umesh Ravji
Umesh Ravji
42,386 Points
Umesh Ravji
Umesh Ravji
42,386 Points 
let button = document.querySelectorAll('button');

That will return ALL of the elements that match the selector, all the buttons in this case.

let button = document.querySelector('button');

Returns the first match, which will give you the answer.

However, I recommend using..

let button = document.querySelector('#makeItRed');

.. because it lets you be way more specific, imagine if your page had a hundred buttons :)

let button = document.getElementById('makeItRed');

You mentioned that didn't work, but it does :)

nicolabell
nicolabell
18,212 Points

I also tried to use your last answer:

let button = document.getElementById('makeItRed');

But this wasn't working for me either, which is why I've ended up here.

Robert Rydlewski
Robert Rydlewski
3,828 Points
Robert Rydlewski
Robert Rydlewski
3,828 Points

Yep... let button = document.getElementById('makeItRed'); do not work for this challenge. However thanks for an explanation. Good job :)

Sebastian Velandia
Sebastian Velandia
24,676 Points
Sebastian Velandia
Sebastian Velandia
24,676 Points

let button = document.getElementById('makeItRed')

nicolabell
nicolabell
18,212 Points

I thought this was right too but it's not working for me!

Adnan Rruka
Adnan Rruka
4,838 Points
Adnan Rruka
Adnan Rruka
4,838 Points

Difficult to understand the question

Caleb Spindler
Caleb Spindler
11,397 Points
Caleb Spindler
Caleb Spindler
11,397 Points

Ended up here for the same reason as others:

let button = document.getElementById("makeItRed");

^ That should be a valid option, right? But it only worked when I used the query selector format (below):

let button = document.querySelector("#makeItRed");

Josh Mord
seal-mask
.a{fill-rule:evenodd;}techdegree
Josh Mord
Full Stack JavaScript Techdegree Student 238 Points
Josh Mord
.a{fill-rule:evenodd;}techdegree
Josh Mord
Full Stack JavaScript Techdegree Student 238 Points

Neither querySelector, querySelectorALL, getElementById, or getElementsByClassName work for me. Unless I'm missing something crucuial, I think this challenge is bugged (i'm using firefox).

Shiva Gautam
Shiva Gautam
7,892 Points
Shiva Gautam
Shiva Gautam
7,892 Points

I too went through the same condition but finally var button = document.querySelector('button'); worked for me. :)

Ndhokoyo Aaron
Ndhokoyo Aaron
6,589 Points

var button = document.querySelector('button');

Larissa Ragland
Larissa Ragland
6,653 Points
Larissa Ragland
Larissa Ragland
6,653 Points

var warning = document.getElementById("warning"); let button = document.querySelector("#makeItRed");