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) Traversing the DOM Getting the First and Last Child

Simon Sporrong
Simon Sporrong
35,097 Points
Posted by Simon Sporrong
Simon Sporrong
35,097 Points

I get: "li.appendChild is not a function" error in the console.

the 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');
const removeItemButton = document.querySelector('button.removeItemButton');
const listItems = document.getElementsByTagName('li')[0];
const listUl = listDiv.querySelector('ul'); 
const lis = listUl.children;
const firstListItem = listUl.firstElementChild;
const lastListItem = listUl.lastElementChild;

lastListItem.style.backgroundColor = 'pink';
firstListItem.style.backgroundColor = 'green';

function attachListItemButtons (li) {
  let up = document.createElement('button');
  up.className = 'up';
  up.textContent = 'Up';
  li.appendChild(up);

  let down = document.createElement('button');
  down.className = 'down';
  down.textContent = 'Down';
  li.appendChild(down);

  let remove = document.createElement('button');
remove.ClassName = 'remove';
  remove.textContent = 'Remove';
  li.appendChild(remove);
}  

for (let i = 0; i < lis.length; i +=1) {
  attachListItemButtons(lis)[i];

}

     listUl.addEventListener('click', (event) => {
 if (event.target.tagName == 'BUTTON') {
   if (event.target.className == "Remove") {
    let li = event.target.parentNode;
    let ul = li.parentNode;
     ul.removeChild(li);

  }
  if (event.target.className == 'up') {
 let li = event.target.parentNode;
  let prevLi = li.previousElementSibling;
    let ul = li.parentNode;
    if (prevLi){
    ul.insertBefore(li, prevLi);
    }
  }


if (event.target.className == 'down'){
  let  li = event.target.parentNode;
  let nextLi = li.nextElementSibling;
  let ul = li.parentNode;
  if (nextLi) {
    ul.insertBefore(nextLi, li);
  }
}
   }
  });


  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 + ':';
  descriptionInput.value = ' ';
});

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

and the HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset = "utf-8">
    <title>JavaScript and the DOM</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <h1 id="myHeading">JavaScript and the DOM</h1>
    <p>Making a web page interactive</p>    
    <button id="toggleList">Hide List</button>
    <div class="list">
    <p class="description">Things that are purple:</p>
<input type="text" class="description">
    <button class="description">Change list description</button>

    <ul>
      <li>grapes</li>
      <li>amethyst</li>
      <li>lavender</li>
      <li>plums</li>
    </ul>
      <input type="text" class="addItemInput">
    <button class="addItemButton">Add Item</button>
      <button class="removeItemButton">Remove Item</button>

      </div> 
    <script src="app.js"></script>
  </body>
</html>

This is the uncaught error i get in the console:

Uncaught TypeError: li.appendChild is not a function at attachListItemButtons (app.js:22) at app.js:36

What am I doing wrong? Tried hard to search for typos, you guys see any? Many thanks!

1 Answer

Steven Parker
Steven Parker
231,271 Points
Steven Parker
Steven Parker
231,271 Points

I see a misplaced parenthesis:

About line 36, you have this line:

  attachListItemButtons(lis)[i];

But you probably intended to write this:

  attachListItemButtons(lis[i]);