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
Mike John
3,182 PointsCan someone help me with whats wrong with my code.? https://w.trhou.se/511mlyyes7
Can someone help me with whats wrong with my code.? https://w.trhou.se/511mlyyes7
5 Answers
Steven Parker
231,271 PointsHere's a few hints:
- in app.js, there's a stray word "class" at the end of line 6
- also on line 6 there's a stray period before the class name (you might have been thinking of querySelector)
- "p" is a collection so it won't have a textContent property (but you could index p to get one element)
- the button says "Change List Color" but changing textContent would only affect the words
Hopefully, that will get you back on track.
Mike John
3,182 PointsCan you please explain what do you mean by this ("p" is a collection so it won't have a textContent property (but you could index p to get one element), and how do i fix it.?
Steven Parker
231,271 PointsAn example of indexing would be "p[0]" to access the first element (right now there's only one in the collection).
Mike John
3,182 PointsmyButton.addEventListener("click", function () {
p[1].textContent = myTextInput.value;
});
This doesnt works too..!
Steven Parker
231,271 PointsWell, no, because there's only one paragraph on the page, so there's only one element in the collection, and index numbers always start at 0, so 0 would be the only valid index.
Mike John
3,182 PointsWhat if I have two paragraphs like:
<p id="myHeading">JavaScript and the DOM </p>
<p class= "description"> Making a webpage interactive </p>
What should I do then.?
Steven Parker
231,271 PointsSince your collection is based on the class name "description", then the second paragraph would still be p[0] and the first one would not be part of that collection.
Mike John
3,182 PointsNow when I add p[0] it changes the description but when I use p[1] it gives me an error. Why is that .? Cant get my head around it..! Please help.!
Steven Parker
231,271 PointsAs I said, your collection has only 1 element, so 0 is the only valid index.
Mike John
3,182 PointsMike John
3,182 Pointsconst myHeading = document.getElementById("myHeading"); const myButton = document.getElementById('myButton'); const myTextInput = document.getElementById('myTextInput'); const myList = document.getElementsByTagName('li'); const NotGreen = document.getElementsByClassName('NotGreen'); const p = document.getElementsByClassName('description');
myButton.addEventListener("click", function () { p.textContent = myTextInput.value;
});
What do you say now.? It still isnt working..!
Steven Parker
231,271 PointsSteven Parker
231,271 PointsI'd say you implemented my first two hints but still haven't addressed the other two.
If you watch the video again, you'll notice that "p" is assigned using document.querySelector which returns a single element, but if you use document.getElementsByClassName instead, you get a collection. As I suggested in the third hint, you can index the collection to access a single element.
The fourth hint is mainly that the button legend doesn't match what it does (or will do when fixed).
Also, when posting code, use the instructions for code formatting in the Markdown Cheatsheet pop-up below the "Add an Answer" area.
Or watch this video on code formatting.
You can also post an updated snapshot.