JavaScript JavaScript and the DOM Making Changes to the DOM Appending Nodes

Robert Rydlewski
Robert Rydlewski
3,644 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
MOD
Liam Clarke
Treehouse Moderator 19,701 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,644 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);
});
Liam Clarke
MOD
Liam Clarke
Treehouse Moderator 19,701 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!