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

Posted by Rik Schoonbeek
Rik Schoonbeek
4,279 Points

Buttons not being appended to li element

Hi there,

I am trying to append the buttons to the list item.

The buttons and list item are properly created (i've checked that by logging them to the console, as can be seen in the code below).

Can anyone see what's going on?

addItemButton.addEventListener('click', () => { 
// Select ul let ul = document.getElementsByTagName('ul')[0];

// create li element to add let li = document.createElement('li');

// create remove button // create button var let buttonRemove = document.createElement('BUTTON'); // text to button buttonRemove.textContent = 'Remove'; // add className to button buttonRemove.className = 'buttonRemove';

// create up button // create button var let buttonUp = document.createElement('BUTTON'); // text to button buttonUp.textContent = 'Up'; // add className to button buttonUp.className = 'buttonUp';

// create down button // create button var let buttonDown = document.createElement('BUTTON'); // text to button buttonDown.textContent = 'Down'; // add className to button buttonDown.className = 'buttonDown';

console.log(buttonDown, buttonUp, buttonRemove);

// append buttons to list item li.appendChild(buttonUp); li.appendChild(buttonDown); li.appendChild(buttonRemove);

console.log(li);

// add inputtext from inputfield li.textContent = addItemInput.value;

ul.appendChild(li); addItemInput.value = ''; 
});

1 Answer

Samuel Ferree
Samuel Ferree
31,722 Points
Samuel Ferree
Samuel Ferree
31,722 Points

Are you assigning the variable "addItemButton" to the button in your html document?

Once I did that, I got a codepen that seemed to work.

Here is my basic HTML

<ul>
</ul>
<button id="addItemButton">Click Me</button>

Here is the javascript

//  !!!! I think this line here is the kicker !!!!
let addItemButton = document.getElementById('addItemButton');

addItemButton.addEventListener('click', () => { 
// Select ul
let ul = document.getElementsByTagName('ul')[0];

// create li element to add
let li = document.createElement('li');

// create remove button
// create button var
let buttonRemove = document.createElement('BUTTON'); 
// text to button
buttonRemove.textContent = 'Remove';
// add className to button
buttonRemove.className = 'buttonRemove';

// create up button 
// create button var
let buttonUp = document.createElement('BUTTON');
// text to button
buttonUp.textContent = 'Up';
// add className to button
buttonUp.className = 'buttonUp';

// create down button
// create button var
let buttonDown = document.createElement('BUTTON');
// text to button
buttonDown.textContent = 'Down';
// add className to button
buttonDown.className = 'buttonDown';

console.log(buttonDown, buttonUp, buttonRemove);

// append buttons to list item
li.appendChild(buttonUp); li.appendChild(buttonDown); li.appendChild(buttonRemove);

console.log(li);

// !!!! I didn't add the code to select a textinput and add it's value. But you would do it
// similarly to the way I added and selected the button !!!!
// add inputtext from inputfield li.textContent = addItemInput.value;

ul.appendChild(li); addItemInput.value = ''; 
});

and here is the codepen