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) Getting a Handle on the DOM Select a Page Element By Its ID

Warren Obenski
Warren Obenski
4,046 Points
Posted by Warren Obenski
Warren Obenski
4,046 Points

Cannot read property 'addEventListener' of null, when JavaScript file is placed at bottom of <body>.

My code looks identical to the code on the video, with the <script tag> linked below where I am calling the JS function. 

<!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>
    <p>Making a web page interactive</p>
    <input type = "text" id = "myTextInput">
    <button id = "myButton">Change headline color</button>
    <button id = "backToBlack">Change headline back to black</button>
    <script src= "app.js"></script>
  </body>
</html>

And my JavaScript code.

const myHeading = document.getElementById('myHeading');
const myButton = document.getElementById('MyButton');
const myTextInput = document.getElementById('myTextInput');
const backToBlack = document.getElementById('backToBlack');

myButton.addEventListener('click', () => {
   myHeading.style.color = myTextInput.value;                                                  
});

backToBlack.addEventListener('click', () =>{
     myHeading.stle.color = 'black';                       

 });

I read through all the previous questions and responses and I seem to be doing everything properly (of course I am not), so I hope I am missing something obvious, as sometimes, in coding, the obvious can't seem to find my gaze...

-Warren

2 Answers

Steven Parker
Steven Parker
231,271 Points
Steven Parker
Steven Parker
231,271 Points

I see two issues:

  • the first button's ID value is "myButton" (lower-case "m") but the code uses "MyButton" (capital "M")
  • the second handler has "stle" instead of "style"
Warren Obenski
Warren Obenski
4,046 Points
Warren Obenski
Warren Obenski
4,046 Points

Thanks for the quick help.

Alexander La Bianca
Alexander La Bianca
15,959 Points
Alexander La Bianca
Alexander La Bianca
15,959 Points

Your 'myButton' in the HTML does not match up with 'MyButton' in JS