I have been tasked with a web development exercise as part of my course. The goal is to modify the provided files so that list items are given a strikethrough when clicked, and clicking them again removes the strikethrough effect. The "done" class in the code snippet below is meant to be used for this purpose. I have carefully reviewed my solution against the provided solutions, but despite following one of them, it doesn't seem to work. Could someone identify what might be causing the issue?
Additionally, I am aware that 'var' is considered deprecated in favor of 'let/const', but I am sticking to the course guidelines.
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
let button = document.getElementById("enter");
let input = document.getElementById("userinput");
let ul = document.querySelector("ul");
let li = document.getElementsByTagName("li");
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(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);