I've created a basic checklist using HTML, CSS and JavaScript that has a strikethrough toggle when you click on the list items. However, when i add new items I'm not able to use the toggle on them.
I've created a for loop to make the list items listen for clicks and a function that adds a line through the items when clicked on but as mentioned before the toggle only applies to the already created list items.
var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");
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();
}
}
var list = document.getElementsByTagName("li");
for (var i=0; i < list.length; i++) {
list[i].addEventListener("click", addToggle);
}
function addToggle() {
this.classList.toggle("done");
}
button.addEventListener("click", addListAfterClick);
input.addEventListener("keypress", addListAfterKeypress);
.done {
text-decoration: line-through;
}
<!DOCTYPE html>
<html>
<head>
<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 class="bold red" random="23">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>
I expected the list items that are being created to also have the toggle, but only the already existing list items have it.