JavaScript JavaScript and the DOM Traversing the DOM Getting All Children of a Node with children

Ivo Vieira
Ivo Vieira
6,518 Points

Buttons are not being created to the existing 'li' only to the newly created.

https://w.trhou.se/7s6b1kzmiq

Can you please tell me what I did wrong?

1 Answer

KRIS NIKOLAISEN
PRO
KRIS NIKOLAISEN
Pro Student 43,358 Points

If you open the workspace associated with the video you'll see the buttons for existing list items are created in index.html

<ul>
        <li>grapes 
          <button class="up">Up</button> 
          <button class="down">Down</button>          
          <button class="remove">Remove</button>
        </li>
        <li>amethyst 
          <button class="up">Up</button> 
          <button class="down">Down</button>          
          <button class="remove">Remove</button>
        </li>
        <li>lavender 
          <button class="up">Up</button> 
          <button class="down">Down</button>          
          <button class="remove">Remove</button>
        </li>
        <li>plums 
          <button class="up">Up</button> 
          <button class="down">Down</button>          
          <button class="remove">Remove</button>
        </li>
      </ul>
Ivo Vieira
Ivo Vieira
6,518 Points

Thank you for your reply, Kris.

The workspace you are pointing, the one associated with the video, is the workspace to start the lesson. However, the goal of the lesson is to add all the 'li' buttons with JavaScript, because if they would be done in the HTML, only the existing 'li' would have the buttons, but the 'li' that are create with the input, wouldn't have the buttons. At around 39 seconds in the video, the teacher removes all the 'buttons' who are children of 'li' from the index.html.

Meanwhile, I got what was causing my issue. In the for loop, my conditional expression had a typo, I was writting it "i < lis.lenght;" instead of "i < lis.length;". This solved the issue.