Llevo unos meses aprendiendo JavaScript y actualmente estoy trabajando en un proyecto de lista de compras.
Quiero poder aplicar una huelga a través de los elementos de la lista cuando se hace clic en ellos. Sin embargo, después de un tiempo trabajando en esto, no me permite hacerlo. Mi intento se puede ver a continuación en la función removeNeedItem . ¿Puede alguien amablemente echar un vistazo a mi código y ofrecer alguna sugerencia?
Gracias de antemano.
<body> <div class="container"> <h1><em>Shopping List</em></h1> <!-- Textbox --> <div class="form-wrap"> <label><strong>Add Item: </strong></label> <input type="text" name="item-name" id="textbox" /> <div class="buttons"> <button class="input-btn" id="need-btn">Need</button> <button class="input-btn" id="own-btn">Have</button> </div> </div> <!-- Lists --> <h2 class="lists">Need to Buy</h2> <ul id="need-list"></ul> <h2 class="lists">Already Own</h2> <ul id="own-list"></ul> </div> </body> var grocNeedList = [{ item: "Salmon", Required: true }]; function displayNeedList() { var needListUl = document.getElementById("need-list"); needListUl.innerHTML = ""; for (var i = 0; i < grocNeedList.length; i++) { grocNeedList[i].item; var listItem = document.createElement("li"); listItem.innerText = grocNeedList[i].item; needListUl.appendChild(listItem); listItem.id = i; listItem.setAttribute("onclick", "removeNeedItem(event)"); } } function removeNeedItem(event) { var position = event.currentTarget.id; position.style.textDecoration = "line-through"; displayGroc(); } var addInput = document.getElementById("textbox"); needButton.addEventListener("click", addNeedItem);