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 All Children of a Node with children

olu adesina
olu adesina
23,007 Points
Posted by olu adesina
olu adesina
23,007 Points

for loop not working (JavaScript)

i keep getting an error message and im not sure why help

const toggle = document.querySelector('#toggleList');
const list = document.querySelector('#list');
const input = document.querySelector('input');
const p = document.querySelector('p.description');
const button = document.querySelector('button.description');
const newItem = document.querySelector('#newItem');
const addNewElement = document.querySelector('#addNewElement');
const removeItem = document.querySelector('#removeItem');
const listItems = document.getElementsByTagName('li');
const ul = list.querySelector('ul');
const lis = ul.children;

function addButtons(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)


}
///THIS IS WHERE IM GETTING AN ERROR HELP!
for (let i = 0; i < lis.length; +=1) {
    addButtons(lis[i]);
}


ul.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.tagName == 'BUTTON') {
        if (event.target.className == 'up') {
            let li = event.target.parentNode;
            let ul = li.parentNode;
            let preLi = li.previousElementSibling;
            if (preLi ) {
                ul.insertBefore(li, preLi);
            }
        }
    }

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

    }

});

function say(something) {
 console.log(something)
}

say('hey');


toggle.addEventListener('click', () => {

    if (list.style.display == 'none') {

        list.style.display = 'block';
        toggle.textContent = 'hide';
    }
    else {
        list.style.display = 'none';
        toggle.textContent = 'show';
    }

})


button.addEventListener('click', () => {
p.textContent= input.value
})

p.title = "list Discription";

addNewElement.addEventListener('click', () => {
    let ul = document.querySelector('ul');
    let li = document.createElement('li');
    li.textContent = newItem.value;
    addButtons(li);
    ul.appendChild(li);
    newItem.value = '';

})

removeItem.addEventListener('click', () => {
    let ul = document.querySelector('ul');
    let li = document.querySelector('li:last-child');
    ul.removeChild(li);


})

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript and the DOM</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <h1 id="myHeading">JavaScript and the DOM</h1>
    <p class="testing">Making a web page interactive</p> 
    <button id="toggleList"> hide list</button>
    <div style="background:pink" id="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>lavende</li>
          <li>plums</li>
        </ul>
        <input type="text" id="newItem">
        <button id="addNewElement">change list description</button><br /><br />
        <button id="removeItem">Remove item</button>
    </div>
    <script src="app.js"></script>
  </body>
</html>

1 Answer

Ari Misha
Ari Misha
19,323 Points
Ari Misha
Ari Misha
19,323 Points

Hiya there! In your "for" loop, you forgot to put "i" alias for "step" part of "for" loop. Do that and you're good to go. (: