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 The Event Object

Posted by Michael Stedman
.a{fill-rule:evenodd;}techdegree
Michael Stedman
Full Stack JavaScript Techdegree Student 13,838 Points

index.html from the project files, as well as in Workspaces, is missing code

I typically download the project files and use them in a different editor. One of the first things that I do after downloading and importing the files to the editor is open Chrome to do a preview before I do any editing of the HTML, CSS, or JS code. I also immediately open the JS console just to have it open at the start of my editing.

When I did this for this particular video (video 5 files seem to be just fine), there was an immediate error in the console. The error I got is as follows:

"app.js:47 Uncaught TypeError: Cannot read property 'addEventListener' of null at app.js:47"

Inspecting Guil Hernandez 's code in the video, everything was the same as the code that I downloaded. I followed along the video, inputting everything in the lesson in case it was some error that would eventually clear up. The only thing that changed was the line it was referencing where the error occured, and it always stayed within the last event listener.

I also opened up the Workspace for this video, and the app.js file in Workspaces was the exact same as the code for the project files app.js. However, I found that BOTH index.html files did not have the HTML code for the "Remove last item" button (which I had also noticed early on that my browser was not showing the button, even though the browswer in the video was).

I added the HTML code to add the "Remove last item" button into both index.html files, and everything in the browser immediately worked without any errors. It also worked when I added in the code that we edited in this video, so just a heads up to anyone that the button may be missing in their code (and a FYI to the Treehouse folks). I'll copy/paste the original that came in the project files index.html and app.js files below for reference (my apologies for the long post):

<!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>
    <button id="toggleList">Hide list</button>
    <div class="list">
      <p class="description">Things that are purple:</p>
      <input type="text" class="description">
      <button class="description">Change list description</button>
      <ul>
        <li>grapes</li>
        <li>amethyst</li>
        <li>lavender</li>
        <li>plums</li>
      </ul>
      <input type="text" class="addItemInput">
      <button class="addItemButton">Add item</button>
    </div>
    <script src="app.js"></script>
  </body>
</html>
Michael Stedman
.a{fill-rule:evenodd;}techdegree
Michael Stedman
Full Stack JavaScript Techdegree Student 13,838 Points

And here is the app.js code from the project files:

const toggleList = document.getElementById('toggleList');
const listDiv = document.querySelector('.list');
const descriptionInput = document.querySelector('input.description');
const descriptionP = document.querySelector('p.description');
const descriptionButton = document.querySelector('button.description');
const addItemInput = document.querySelector('input.addItemInput');
const addItemButton = document.querySelector('button.addItemButton');
const removeItemButton = document.querySelector('button.removeItemButton');

listDiv.addEventListener('mouseover', () => {
  listItems[i].textContent = listItems[i].textContent.toUpperCase();
});
listDiv.addEventListener('mouseout', () => {
  listItems[i].textContent = listItems[i].textContent.toLowerCase();
});

toggleList.addEventListener('click', () => {
  if (listDiv.style.display == 'none') {
    toggleList.textContent = 'Hide list';
    listDiv.style.display = 'block';
  } else {
    toggleList.textContent = 'Show list';                        
    listDiv.style.display = 'none';
  }                         
});

descriptionButton.addEventListener('click', () => {
  descriptionP.innerHTML = descriptionInput.value + ':';
  descriptionInput.value = '';
});

addItemButton.addEventListener('click', () => {
  let ul = document.getElementsByTagName('ul')[0];
  let li = document.createElement('li');
  li.textContent = addItemInput.value;
  ul.appendChild(li);
  addItemInput.value = '';
});

removeItemButton.addEventListener('click', () => {
  let ul = document.getElementsByTagName('ul')[0];
  let li = document.querySelector('li:last-child');
  ul.removeChild(li);
});

1 Answer

Joel Kraft
STAFF
Joel Kraft
Treehouse Guest Teacher
Joel Kraft
Joel Kraft
Treehouse Guest Teacher

Michael,

That was indeed a mistake. The index.html file should have contained the "remove" button, which was producing the error you noticed. I have fixed the issue. Thanks for letting us know about this!

Joel