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 Creating New DOM Elements

Christina Araujo
seal-mask
.a{fill-rule:evenodd;}techdegree
Christina Araujo
Full Stack JavaScript Techdegree Student 4,819 Points
Posted by Christina Araujo
.a{fill-rule:evenodd;}techdegree
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
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

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: