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 Interactive Web Pages with JavaScript Traversing and Manipulating the DOM with JavaScript Appending and Removing Elements

raj kanwar
raj kanwar
4,043 Points
Posted by raj kanwar
raj kanwar
4,043 Points

I think these two lines should be equal but only the second one works

These are the code lines:

var deleteButtonForSelectedListName = selectedListItem.getElementsByClassName("delete");

var deleteButtonForSelectedListName = selectedListItem.querySelector("button.delete");

So the second one works perfectly but first one doesnt for some reason which I cant find out!

Is there any difference I am missing ?

//app.js
var body = document.body;
var newParagraph = document.createElement("p");
var pleaseEnableParagraph = document.querySelector("#please_enable");

//Remove "Please Enable JavaScript" paragraph



//Append new paragaph to document

<!DOCTYPE html>
<html>
  <body>
    <p id="please_enable">Please Enable JavaScript</p>

    <script src="app.js"></script>
  </body>
</html>

1 Answer

geoffrey
geoffrey
28,736 Points
geoffrey
geoffrey
28,736 Points

I formated your code, please try to use markdown properties, you added the ticks everytime, but you seem to forget to add the language next to it. Thank you.

Otherwise, you ask what could cause the trouble you have , both lines look similar to you.

However I think getElementByClassName returns an array with all the elements with the delete class. So mayble you should just do something like.

var deleteButtonForSelectedListName = selectedListItem.getElementsByClassName("delete")[0];

This way, if you have only one element, It saves inside the variable the first html element with the delete class inside. Just a thought, not 100% sure about this as being a proper solution.