List Item supposed to strikethrough on click, not working

September 4, 2022

This is an exercise in my webdev course, in which I am supposed to alter the files given to me such that the list items will have a strikethrough when they are clicked, and clicking them again removes the strikethrough. We are supposed to accomplish this using the "done" class seen below, and my addition to the script.js is below the comment "make item strikethough on click using CSS class". I have already checked my solution against the given ones, and despite it being one of those solutions, it is not working for me. Can anyone find what’s going wrong?

Also, I know that var is deprecated and let/const are what I should use, but I’m trying to follow the course as it’s being taught.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <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>
        <li>Jello</li>
        <li>Spinach</li>
        <li>Rice</li>
        <li>Birthday Cake</li>
        <li>Candles</li>
    </ul>
    <script type="text/javascript" src="script.js"></script>
</body>
</html>

style.css

.coolTitle {
  text-align: center;
  font-family: 'Oswald', Helvetica, sans-serif;
  font-size: 40px;
  transform: skewY(-10deg);
  letter-spacing: 4px;
  word-spacing: -8px;
  color: tomato;
  text-shadow: 
    -1px -1px 0 firebrick,
    -2px -2px 0 firebrick,
    -3px -3px 0 firebrick,
    -4px -4px 0 firebrick,
    -5px -5px 0 firebrick,
    -6px -6px 0 firebrick,
    -7px -7px 0 firebrick,
    -8px -8px 0 firebrick,
    -30px 20px 40px dimgrey;
}

.done {
  text-decoration: line-through;
}

script.js

var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");
var li = document.getElementsByTagName("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();
    }
}

button.addEventListener("click", addListAfterClick);

input.addEventListener("keypress", addListAfterKeypress);

//make item strikethough on click using CSS class
function strikeThough () {
    if (target.tagname === "li") {
        target.className.toggle("done");
    }
}

li.addEventListener('click', strikeThough);

>Solution :

You should make a habit of opening the console and reading the errors. Printing what you query can also be helpful. As for the answer, your var li is an array containing all the elements you want to add the clickevent on. Try this:

for(let i = 0; i < li.length; i ++){
  li[i].addEventListener("click", function(){
    if(li[i].classList.contains('done')){
        li[i].classList.remove('done');
    }else{
        li[i].classList.add('done');
    }
});

}