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 Removing Nodes

sam poplack
sam poplack
9,467 Points
Posted by sam poplack
sam poplack
9,467 Points

null is not an object

So Im working on the DOM part and on addItemButton.addEventListene I get the error null is not an object. Can someone explain to me the error im getting

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

2 Answers

Neil McPartlin
Neil McPartlin
14,662 Points
Neil McPartlin
Neil McPartlin
14,662 Points

Hi Sam,

The snippet of code you have pasted here seems to be OK, it's just missing the final line containing... });

I assume you are seeing the error in your browser Javascript console. Does it also reference a filename and line number where the actual problem can be found? It could be elsewhere in your app.js file. Feel free to paste your entire file here but please use the instructions found in the 'Markdown Cheatsheet' at the bottom of this post.

Neil McPartlin
Neil McPartlin
14,662 Points
Neil McPartlin
Neil McPartlin
14,662 Points

Sam, as previously requested, in future posts, please post your code as described in the 'Markdown Cheatsheet'. In this way, it is easier for others to help you.

I have done this for you, see below.

const toggleList = document.getElementById('toggleList'); 
const listDiv = document.querySelector('.list'); 
const input = document.querySelector('input.description'); 
const p = document.querySelector('p.description'); 
const button = document.querySelector('button.description'); 
const addItemInput = document.querySelector('input.addItemInput');
// const addItemButton = document.querySelector('input.addItemButton'); --> This entry replaced by the line below.
const addItemButton = document.querySelector('button.addItemButton'); 
// const removeItemButton = document.querySelector('input.removeItemButton'); --> This entry commented out as the removeItemButton feature not yet fully defined. Note this also shows 'input' which is not correct.

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

button.addEventListener('click', () => {
    p.innerHTML = input.value + ':';
});

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

// The remaining lines commented out as the removeItemButton feature not yet fully defined.
// removeItemButton.addEventListener('click', () => {
//     let ul = document.getElementsByTagName('ul')[0];
//     let li = document.querySelector('li:last-child');
//     ul.removeChild(li);
// });

  1. Your browser JavaScript console will have reported the problem affects the addItemButton click event listener and sure enough, the problem is with the addItemButtom declaration at the top of the app.js file. You just need to replace 'input' with 'button' to fix this. The 'Add item' button now functions correctly.

  2. However, note that you now have a similar but different error in your JavaScript console and this time it refers to your removeItemButton feature. I have commented these entries out as I see you have only just started adding this feature. Now you should see no error message in your JavaScript console.

sam poplack
sam poplack
9,467 Points
sam poplack
sam poplack
9,467 Points

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

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

button.addEventListener('click', () => { p.innerHTML = input.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);

}); This is my code. This is the code "addItemButton.addEventListener" that is giving me the error