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!

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

Posted by Rick Love
Rick Love
5,312 Points

Adding Item isn't working

My li isn't getting added to the page???

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 addItemInput = document.querySelector('input.addItemInput'); const addItemButton = document.querySelector('input.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 = addItemInput.value; ul.appendChild(li);

});

1 Answer

Steven Parker
Steven Parker
227,126 Points
Steven Parker
Steven Parker
227,126 Points

There's no obvious issue in this JavaScript code.

But this code clearly works with an HTML component, and the issue may be there.

When asking about issues with multi-source projects, it might be best to make a snapshot of your workspace and post the link to it here.

And when posting code directly, always use the instructions for code formatting in the Markdown Cheatsheet pop-up below the "Add an Answer" area. :arrow_heading_down: Or watch this video on code formatting.

SAMUEL LAWRENCE
SAMUEL LAWRENCE
Courses Plus Student 8,447 Points
SAMUEL LAWRENCE
SAMUEL LAWRENCE
Courses Plus Student 8,447 Points

Hi Steven Parker I'm having the same issue, Can't figure it out myself. Everything seems ok and as you said there is nothing wrong with the code above, my code is the same. I took your advice and checked the HTML, I couldn't see anything wrong either. Can you help out? 

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript and the DOM</title>
    <link rel="stylesheet" href="css/styles.css">
  </head>
  <body>
    <h1 id="myHeading">JavaScript and the DOM</h1>
    <p>Making a web page interactive</p>

    <button type="button" name="button" id="toggleList">Hide list</button>
<div class="list">
      <p class="description">Things that are purple:</p>

      <input type="text" name="" value="" class="description">
      <button type="button" name="button" class="description">Change list description</button>
      <ul>
        <li>grapes</li>
        <li>amethyst</li>
        <li>lavender</li>
        <li>plums</li>
      </ul>
      <input type="text" name="" value="" class="addItemInput">
      <button type="button" name="button" class="addItemButton">Add items</button>
</div>
    <script src="js/append-new-items.js"></script>
  </body>
</html>

JavaScript

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 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', () => {
  if (descriptionInput.value == "") {
    descriptionP.innerHTML = 'Things that are purple:';
  } else {
    descriptionP.innerHTML = descriptionInput.value + ':';
  }
});

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

In my code here I added the conditional statement I asked you about in an earlier question.

In my HTML file you'll notice the name of the .js file is not named app.js that's because I create separate files for each lesson, just in case I'm stuck I can go back to a specific lesson and look at the code again. but apart from that nothing is different.

Steven Parker
Steven Parker
227,126 Points
Steven Parker
Steven Parker
227,126 Points

:bell: I got your notification, but I saw you had started a fresh question and answered there.