JavaScript JavaScript and the DOM Making Changes to the DOM Creating New DOM Elements

Christina Araujo
Christina Araujo
Full Stack JavaScript Techdegree Student 4,819 Points

appendChild(); code isn't working for me. What am I doing wrong?

const myToggle = 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 addNewItemButton = document.querySelector('button.addNewItemButton'); const addNewItemInput = document.querySelector('input.addNewItemInput');

myToggle.addEventListener('click', () => { if (listDiv.style.display == 'none') { myToggle.textContent = 'Hide List'; listDiv.style.display = "block" } else { myToggle.textContent = 'Show List'; listDiv.style.display = 'none'; } }); descriptionButton.addEventListener ('click', () => { descriptionP.innerHTML = descriptionInput.value + ":" });

addNewItemButton.addEventListener ('click', () => { listDiv.textContent = addNewItemInput.value });

//I have follow every step, however when I input information into the field and click the add item button, nothing happens. Can anyone offer any tips and hints at what I need to correct here?

2 Answers

Jennifer Nordell
STAFF
Jennifer Nordell
Treehouse Staff

Hi there, Christina Araujo ! You aren't doing anything wrong (probably)! Unless, of course, you're going to count your adventurous spirit and trying things as you code them, which is actually a great thing! However, this is one of those few times where you're going to run into something that doesn't work in the video. And it's because it's not done yet. Take a look at the last few lines from this video:

I'll go ahead and enter some text in the bottom field here and click add item. And nothing happens yet. Well that's because even though we've created the element we haven't added it to the DOM yet. Right now we're just creating free floating elements that exist only in memory somewhere. So in the next video you'll learn how to insert content into the DOM.

Long story short: you got a bit ahead of yourself (and this video)! Smart money says you're doing just fine. Hang in there! :sparkles:

Christina Araujo
Christina Araujo
Full Stack JavaScript Techdegree Student 4,819 Points

Thank you so much!

I went through all the videos in this section, this was me just reviewing to see where I went wrong. lol