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
Daven Hietala
8,040 PointsAdd Item Button is not responding to my clicks, and it's making me crazy.
I created the button to add an <li> to the list. It is not working. I have gone through every existing question on the lesson that I can find. I still don't understand what I am doing wrong here. I have scoured this code to for erros to no avail. Please help me.
const toggleList = document.getElementById('toggleList');
const listDiv = document.querySelector('.list');
const descriptionInput = document.querySelector('input.description');
const descriptionP = document.querySelector('p.description');
const descriptionButton = document.querySelector('button.descripion');
const addItemInput = document.querySelector('input.addItemInput');
const addItemButton = document.querySelector('button.addItemButton');
toggleList.addEventListener('click', () => {
if (listDiv.style.display == 'none') {
toggleList.textContent = 'Hide list';
listDiv.style.display = 'block';
} else {
toggleList.textContent = 'Show list';
listDiv.style.display = 'none';
}
});
descriptionButton.addEventListener('click', () => {
descriptionP.innerHTML = descriptionInput.value + ':';
});
addItemButton.addEventListener('click', () => {
let ul = document.getElementsByTagName('ul')[0];
let li = document.createElement('li');
li.textContent = addItemInput.value;
ul.appendChild(li);
});
<!DOCTYPE html>
<html>
<head>
<title>JavaScript and the DOM</title>
<link rel='stylesheet' href='css/style.css'>
</head>
<body>
<h1 id='myHeading'>JavaScript and the DOM</h1>
<p>Making a web page interactive</p>
<button id='toggleList'>Hide list</button>
<div class='list'>
<p class='description'>Things that are purple:</p>
<input type='text' class='description'>
<button class='description'>Change list description</button>
<ul>
<li>grapes</li>
<li>amethyst</li>
<li>lavender</li>
<li>plums</li>
</ul>
<input type='text' class='addItemInput'>
<button class='addItemButton'>Add item</button>
</div>
<script src="app.js"></script>
</body>
</html>
I could really use an explanation of what I am doing wrong here. Thank you
5 Answers
Steven Parker
231,248 PointsI'm guessing you didn't notice that the "Change list description" button was also not working.
Both are caused on line 5 where the code has "descripion" (with no "t") instead of "description".
Daven Hietala
8,040 PointsWow, I goofed that one. I appreciate your time Steven. Have a glorious day!
Daven Hietala
8,040 PointsAnd while I have you here Steven I had another smaller question. I think this is how I misspelled description. Sometimes in the built in tree house text editor something switches and anytime I try to add text to an existing line it automatically deletes the text in front of it causing me to have to cut the entire line, type the correction and paste the entire line in front of it. I know it is a simple fix. I do not see a button at the bottom of the screen similar to microsoft word that turns this on or off. Any ideas?
Steven Parker
231,248 PointsI'm not familiar with that behavior. Did you say there is something similar in Word? I'm not familiar with that, either. What is that function called in Word?
Daven Hietala
8,040 PointsI think it is called something like overtype.
Steven Parker
231,248 PointsOh, I see what you mean now. That can be turned on and off with the "insert" button on the keyboard.
Daven Hietala
8,040 PointsTHANK YOU STEVEN!! That was driving me nuts! Have a good one.