I'm a few months into learning JavaScript and currently working on a shopping list project.
I want to be able to apply a strike through the list items when they are clicked on. However,after some time working on this, it does not allow me to do so. My attempt can be seen below in the function removeNeedItem. Can someone kindly have a look through my code and offer any suggestions?
Thank you in advance.
<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);