add list item and change list description not working

Question

<!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="desciption">Things that are purple:</p> <input type="text" class="description"> <button class="desciption">Change List description</button> <ul> <li>grapes <button>Remove</button></li> <li>amethyst <button>Remove</button></li> <li>lavender <button>Remove</button></li> <li>plums <button>Remove</button></li> </ul> <input type="text" class="addItemInput"> <button class="addItemButton">Add Item</button> <button class="removeItemButton">Remove last item</button> </div> <script src="app.js"></script> </body> </html>

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.description'); const listUl = listDiv.querySelector('ul'); const addItemInput = document.querySelector('input.addItemInput'); const addItemButton = document.querySelector('button.addItemButton');

listUl.addEventListener('click', (event) => { if (event.target.tagName == 'BUTTON') { let li = event.target.parentNode; let ul = li.parentNode; ul.removeChild(li); } });

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 + ':'; descriptionInput.value = ''; });

addItemButton.addEventListener('click', () => { let ul = document.getElementsByTagName('ul')[0]; let li = document.createElement('li'); li.textContent = addItemInput.value; ul.appendChild(li); addItemInput.value = ''; });

Answer 1 · 2021-03-02T02:52:31Z

March 2, 2021 2:52am

It looks like you misspelled "desciption" in the button class. This means that null was returned when trying to query that button. Your entire program breaks since null does not have an addEventListener function. You would get an error like, Uncaught TypeError: Cannot read property 'addEventListener' of null. This should solve your problem unless there is another issue somewhere else.

<!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="desciption">Things that are purple:</p>
        <input type="text" class="description">

       <!--Misspelled description here-->
        <button class="desciption">Change List description</button>

        <ul>
            <li>grapes
                <button>Remove</button>
            </li>
            <li>amethyst
                <button>Remove</button>
            </li>
            <li>lavender
                <button>Remove</button>
            </li>
            <li>plums
                <button>Remove</button>
            </li>
        </ul>
        <input type="text" class="addItemInput">
        <button class="addItemButton">Add Item</button>
        <button class="removeItemButton">Remove last item</button>
    </div>
    <script src="app.js"></script>
</body>

</html>

Welcome to the Treehouse Community

Looking to learn something new?

Edelweiss Villoria

Edelweiss Villoria

add list item and change list description not working

1 Answer

Juan Luna Ramirez

Juan Luna Ramirez