JavaScript JavaScript and the DOM Traversing the DOM Solution: Using nextElementSibling

Marcell Ciszek
Marcell Ciszek
7,255 Points

Why is my down button not working?

I cant fix it

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 listUl = listDiv.querySelector('ul'); const addItemInput = document.querySelector('input.addItemInput'); const addItemButton = document.querySelector('button.addItemButton');

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(li,nextLi); } } } });

1 Answer

KRIS NIKOLAISEN
PRO
KRIS NIKOLAISEN
Pro Student 48,677 Points

You have nextLi and li reversed in insertBefore here:

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

It should be

 ul.insertBefore(nextLi, li);
Marcell Ciszek
Marcell Ciszek
7,255 Points

Thank you for the answer