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

Brian Hache
Brian Hache
7,611 Points
Posted by Brian Hache
Brian Hache
7,611 Points

Trouble appending buttons in the workspace!

Ive been over a bunch of code examples and I cant seem to find my error. the button simply wont show up. If there is a problem with this code, id be thankful to have it pointed out to me. Otherwise it looks like somethings buggy :\ I had the same issue in a previous workspace example.

// 1: Set the text of the <h1> element

let h1 = document.querySelector('h1');
h1.textContent = 'Things I DO';

// 2: Set the color of the <h1> to a different color

h1.style.color = 'blue';

// 3: Set the content of the '.desc' paragraph // The content should include at least one HTML tag

const desc = document.querySelector('.desc');
desc.innerHTML = "things i want to do <i>today</i>";

// 4: Set the class of the <ul> to 'list'

let ul = document.querySelector('ul');
ul.className = "list";

// 5: Create a new list item and add it to the <ul>

let li = document.createElement('li');
li.innerHTML = '<input> Cook';
ul.appendChild(li);

// 6: Change all <input> elements from text fields to checkboxes

const ins = document.querySelectorAll('input');
for (i = 0; i <= ins.length; i++){
  ins[i].type = 'checkbox';
}

// 7: Create a <button> element, and set its text to 'Delete' // Add the <button> inside the '.extra' <div>

const buttonDelete = document.createElement('button');
buttonDelete.textContent = 'Delete';

const extra = document.querySelector('.extra');
extra.appendChild('buttonDelete');
edwinshen
edwinshen
13,168 Points
edwinshen
edwinshen
13,168 Points

I think your error is here: extra.appendChild('buttonDelete'); I don't think you need the '' around buttonDelete.

Try this: extra.appendChild(buttonDelete);

1 Answer

Dave StSomeWhere
Dave StSomeWhere
19,870 Points
Dave StSomeWhere
Dave StSomeWhere
19,870 Points

Hello Brian, I see 2 errors in your code. Try fixing those and see if you are working as desired.

1 - you incorrectly use less than or equal to - when it should be only less than - so any code following this never executes

const ins = document.querySelectorAll('input');
for (i = 0; i <= ins.length; i++){    // change to only less than
  ins[i].type = 'checkbox';
}

2 - you don't want the string 'buttonDelete', so, remove the quotes.

const buttonDelete = document.createElement('button');
buttonDelete.textContent = 'Delete';

const extra = document.querySelector('.extra');
extra.appendChild('buttonDelete');  // buttonDelete should not be quoted

Check out this Pen to see it working - I had to guess at the HTML, you might want to include that in the future.