I have added the li variable using querySelectorAll, but when I attempt to add an event listener to it to change the textDecoration style to line-through, I am not having any success. Any ideas?
// Variables
let addBtn = document.querySelector("#addBtn");
let input = document.querySelector("#input");
let ul = document.querySelector("ul");
let li = document.querySelectorAll("li");
let completeBtn = document.querySelector("#complete-btn");
// Functions
function inputLength() {
return input.value.length;
}
function createListElement() {
let li = document.createElement("li");
li.appendChild(document.createTextNode(input.value));
ul.appendChild(li);
input.value = "";
}
function addListAfterClick() {
if (inputLength() > 0) {
createListElement();
}
}
function addListAfterKeypress(e) {
if (inputLength() > 0 && event.keyCode === 13) {
createListElement();
}
}
function done() {
li.style.textDecoration = "line-through";
}
// Event Listeners
addBtn.addEventListener("click", addListAfterClick);
input.addEventListener("keypress", addListAfterKeypress);
// I would like to add an event listener here so that the li elements textDecoration is changed to "line-through"
completeBtn.addEventListener("click", function complete() {
alert("Congratulations! You won't starve this week.");
console.log(completeBtn);
completeBtn.style.display = "none";
});