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
Stephen Todd
1,826 PointsFor this video getElementById works but using querySelector does not allow me to hide the list.
Why does getElementById work and querySelector does not? When hiding the list.
Stephen Todd
1,826 Pointsconst toggleListButton = document.getElementById('toggleList'); const listDiv = document.querySelector('.list'); const input = document.querySelector('input'); const p = document.querySelector('p.description'); const button = document.querySelector('button');
toggleListButton.addEventListener('click', () => {
listDiv.style.display = 'none'; });
button.addEventListener('click', () => { p.innerHTML= input.value + ":"; });
Stephen Todd
1,826 Pointsconst toggleListButton = document.querySelector('toggleList'); const listDiv = document.querySelector('.list'); const input = document.querySelector('input'); const p = document.querySelector('p.description'); const button = document.querySelector('button');
toggleListButton.addEventListener('click', () => {
listDiv.style.display = 'none'; });
button.addEventListener('click', () => { p.innerHTML= input.value + ":"; });
Stephen Todd
1,826 PointsThe same exact code other than getElementById and querySelector. But querySelector does not work.
2 Answers
Jason Anello
Courses Plus Student 94,610 PointsquerySelector is expecting you to pass in a css selector. When you pass in "toggleList", it doesn't know if that's for an id or a class.
If you pass in an id selector such as "#toggleList" then it knows to look for an id with that value.
The # is not needed for getElementById because it works specifically for id values and so the # is already assumed.
Stephen Todd
1,826 PointsThank You.
Carlos Chang Cheng
Courses Plus Student 12,030 PointsFor me its happening the other way around... I had to use querySelector() to work but when I use getElementById() an uncaught error is shown:
app.js:15 Uncaught TypeError: Cannot set property 'textContent' of null at HTMLButtonElement.button.addEventListener
Here is my code:
const toggleList = document.getElementById('toggleList');
const list = document.querySelector('.list');
const input = document.querySelector('input');
const p = document.querySelector('p.description');
const button = document.querySelector('button');
button.addEventListener('click', () => {
if (list.style.display == 'none') {
toggleList.textContent = 'Hide list';
list.style.display = 'block';
}
else {
toggleList.textContent = 'Show list';
list.style.display = 'none';
}
});
```
Jason Anello
Courses Plus Student 94,610 PointsYou mean that you couldn't get getElementById to work for the button?
What did you have for the argument to that and what is your html code for that button?
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsHi Stephen,
It would help to show both versions of the code that you're trying.