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 trialRik Schoonbeek
4,279 PointsButtons 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
31,722 PointsAre 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