Adding item isn't working part 2

Question

Hi Steven Parker I'm having the same issue, Adding item isn't working, 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?

video link:https://teamtreehouse.com/library/appending-nodes

<!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.

I posted the question here again cause I noticed the answer to the question above was posted in July, I was worried you might have already stopped following this post.

Answer 1 · 2017-12-21T05:56:24Z

December 21, 2017 5:56am

you misspelled appendChild

Answer 2 · 2017-12-21T23:01:28Z

December 21, 2017 11:01pm

we've all been there. it's just part of learning to code. one wrong character can break everything, and on top of that often the error messages you get won't be very helpful. i have answered hundreds of questions on here and frequently the only issue is a spelling error, so they just kind of pop out to me. if everything is spelled correctly then i examine the program logic.

Welcome to the Treehouse Community

Looking to learn something new?

SAMUEL LAWRENCE

SAMUEL LAWRENCE

Adding item isn't working part 2

2 Answers

james south

james south

SAMUEL LAWRENCE

SAMUEL LAWRENCE

Steven Parker

Steven Parker

james south

james south

SAMUEL LAWRENCE

SAMUEL LAWRENCE