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) Making Changes to the DOM Appending Nodes

Robert Rydlewski
Robert Rydlewski
3,828 Points
Posted by Robert Rydlewski
Robert Rydlewski
3,828 Points

My app.js code don't work and I can't find the issue :(

Hey I fallowed the lesson however my code don't work. When I trued add the item the ruction doesn't work :(. When I checking out in google chrome it showed me" Uncaught TypeError: Cannot read property 'addEventListener' of null at app.js:24"

I can't find issue in this code and it's looks exactly the same as in the lesson. I lost my mind. ?? 

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 addIthemInput = document.querySelector ('addIthemInput');
const addIthemButton = document.querySelector ('addItemButton');

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 + ':';
});


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


});

4 Answers

Liam Clarke
Liam Clarke
19,938 Points

Hello

You need to add a dot (.) before the classname to select it within querySelector. MDN docs explain here

const addIthemInput = document.querySelector('.addIthemInput');
const addItemButton = document.querySelector('.addItemButton');

Currently, you are looking for a type selector and not a class selector. This is why it is undefined as non exist.

This just takes practice to spot the errors which will come with time.

Everything else you have written looks good, keep up the good work!

Liam Clarke
Liam Clarke
19,938 Points
Liam Clarke
Liam Clarke
19,938 Points

Hi Robert

TypeError: Cannot read property 'addEventListener' of null, generally means that the target element is null.

What you should do is check each event listener target and make sure it is returning a value, just console log this for ease, you will then see which one is causing the issue

console.log(toggleList);
console.log(descriptionButton);
console.log(addIthemButton);

Alternatively, check which event listener is on line 24 as the error suggests and this will be the one that is a null target.

To future proof this, and prevent unwanted errors, you should consider checking the target element exists before adding an event listener:

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

Hope this helps!

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

Hi Liam,

Thank You for your response and your tips. I find out by console.log that the (addItemButton); is not define on line 24.

However I define the variable (addItemButton) on the top of the code. I checked spellings as well as I don't see the reason why should work. I checked the code countless times with the one show in the lesson and look exactly the same. Yet there is error of my thinking since it doesn't work. I slowly start questioning if programming is for me since I can't find the issue here :(

<!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="addIthemInput">
        <button class="addItemButton">Add item</button>
  </div>
    <script src="app.js"></script>
  </body>
</html>

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 addIthemInput = document.querySelector ('addIthemInput');
const addItemButton = document.querySelector ('addItemButton');

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 + ':';
});


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