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

Posted by Greg Schudel
Greg Schudel
4,090 Points

Cannot get multiple buttons to work

I'm trying to use the appropriate methods so that my web app changes the an element's font color OR background color using two different buttons. But I keep on getting the error ''Cannot read property 'addEventListener' of null" on my second function.

Any help would be appreciated

HTML FILE

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript and the DOM</title>
    <link rel="stylesheet" href="css/style.css">

  </head>
  <body>
    <h1 id="myHeading">JavaScript and the DOM</h1>
    <button id="changeColor" > Change Font Color </button>
    <button id="changeBgColor" > Change Background Color </button>

    <p>Making a web page interactive</p>
          <p title="label" >Things that are purple:</p>
        <input type="text" id="myTextInput">
          <ul>
            <li>grapes</li>
            <li class="error-not-purple">oranges</li>
            <li>amethyst</li>
            <li>lavender</li>
            <li class="error-not-purple">fire trucks</li>
            <li class="error-not-purple">snow</li>
            <li>plums</li>
          </ul>

  <script src="app.js"></script>  
  </body>


</html>

JS FILE

const changeColor = document.getElementById('myHeading');

const colorButton = document.querySelector('button');

const colorBgButton = document.getElementById('changeBgColor');

const myTextInput = document.getElementById('myTextInput'); 



colorButton.addEventListener('click', () => {


     changeColor.style.color = myTextInput.value;


});


colorBgButton.addEventListener('click', () => {


     changeColor.style.backgroundColor = myTextInput.value;


});
Calin Bogdan
Calin Bogdan
14,921 Points

Hi Greg!

Are you sure this is the code causing you trouble? I tested it on my machine and it works just fine.

Andrei Duhanes
Andrei Duhanes
14,155 Points

It should work fine. https://codepen.io/AndreiDude/pen/gGrEmE

2 Answers

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

The code shown here works, as pointed out by Calin and Andrei. The error message * ''Cannot read property 'addEventListener' of null"* may have been caused by a typo that got corrected when you transferred your code to this question. Check this line in your original HTML code:

    <button id="changeBgColor" > Change Background Color </button>

And check this line in your script code:

const colorBgButton = document.getElementById('changeBgColor');

A typo in the name "changeBgColor" on either of these lines could cause that error.

For future questions, to facilitate a more accurate analysis you can make a snapshot of your workspace and post the link to it here.

Greg Schudel
Greg Schudel
4,090 Points
Greg Schudel
Greg Schudel
4,090 Points

WHA!?!? I guess I didn't refresh in my browser? Can we delete this post so I don't confuse anyone else?

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

Questions cannot be deleted once they have been answered.