Estoy tratando de alternar la clase "hecho" de los elementos en una matriz al hacer clic, pero sigo recibiendo mensajes de error que dicen "Error de referencia no detectado: la lista de clases no está definida". Cuando trato de console.log ("testing") al hacer clic, funciona, así que sé que estoy cerca, simplemente no puedo entenderlo.
var button = document.getElementById("enter"); var input = document.getElementById("userinput"); var ul = document.querySelector("ul"); var li = document.querySelectorAll("li"); function inputLength() { return input.value.length; } function createListElement() { var li = document.createElement("li"); li.appendChild(document.createTextNode(input.value)); ul.appendChild(li); input.value = ""; } function addListAfterClick() { if (inputLength() > 0) { createListElement(); } } function addListAfterKeypress(event) { if (inputLength() > 0 && event.keyCode === 13) { createListElement(); } } function toggleDone() { classList.toggle("done"); } for (var i = 0; i < li.length; i++) { li[i].addEventListener("click", toggleDone); } button.addEventListener("click", addListAfterClick); input.addEventListener("keypress", addListAfterKeypress); <html> <head> <title>Javascript + DOM</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Shopping List</h1> <p id="first">Get it done today</p> <input id="userinput" type="text" placeholder="enter items"> <button id="enter">Enter</button> <ul> <li>Notebook</li><button id="delete">Delete</button> <li>Jello</li><button id="delete">Delete</button> <li>Spinach</li><button id="delete">Delete</button> <li>Rice</li><button id="delete">Delete</button> <li>Birthday Cake</li><button id="delete">Delete</button> <li>Candles</li><button id="delete">Delete</button> </ul> <script type="text/javascript" src="script.js"></script> </body></html>