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

Obe Juarez
Obe Juarez
5,903 Points

Appending not working

Im wondering why when i finish adding the appendChild, it wont APPEND

const toggleList = document.querySelector('#toggleList');
const listDiv = document.querySelector('.list');
const descriptionInput = document.querySelector('input');
const descriptionP = document.querySelector('p.description');
const descriptionButton = document.querySelector('button');
const addItemInput = document.querySelector('input.addItemInput');
const addItemButton = document.querySelector('button.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= add.addItemInput.value;
ul.appendChild(li);
});

Mod Edit: Fixed code formatting for readability. You can add fancy formatting using markdown.

1 Answer

rydavim
MOD
rydavim
Treehouse Moderator 18,641 Points

It looks like you have an extraneous add around line 71 of your app.js file.

addItemButton.addEventListener('click', () => {
let ul = document.getElementsByTagName('ul')[0];                              
let li = document.createElement('li');
li.textContent= add.addItemInput.value; // add is unneeded - you can just set it equal to addItemInput.value
ul.appendChild(li);

Everything else looks good, but let me know if that doesn't solve your issue. Good luck, and happy coding!

Obe Juarez
Obe Juarez
5,903 Points

Wow, i could have sworn that i wrote it just as Gill did. Thanx!