I'm super new to JS, HTML, and CSS. I've looked up many answers but can't quite understand the context when applied to my situation. Button 2 is what needs the onClick function, but I'm not sure how to implement the strikethrough aspect. Thank you!
My JS goes as follows:
window.onload = function() {
document.getElementById("submit-btn").addEventListener("click", function() {
let text = document.getElementById("text-box").value;
let li = document.createElement("li");
li.id = "liId";
li.innerText = text;
document.getElementById("unordered-list").appendChild(li);
let button = document.createElement("button");
button.innerText = "X";
button.setAttribute = ("id", "b1");
li.appendChild(button);
button.addEventListener("click", () => li.parentNode.removeChild(li));
document.getElementById("unordered-list").appendChild(li);
let button2 = document.createElement("button");
button2.innerText = "Done";
button2.id = "b2";
li.appendChild(button2);
li.appendChild(button);
li.appendChild(button2);
});
document.getElementById("b2").addEventListener("click", function () {
document.getElementById("liId").style = "text-decoration: line-through;"
});
}
HTML:
<html lang="en">
<head>
<link rel="stylesheet" href="style.css" />
<title>My First Project</title>
</head>
<body>
<script src="script.js"></script>
<header id="to-do-box">
<h1>To-Do List</h1>
<div id="top-half">
<form>
<input type="text" id="text-box" placeholder="Add an item!">
<button type="button" id="submit-btn">Submit</button>
<button type="button" id="clear-field-btn">Clear field</button>
</form>
</div>
</header>
<div id="ul">
<ul id="unordered-list"></ul>
</div>
</body>
</html>
You can do this by implementing an event listener that activates on button click. This will delete the first list element that is shown.
document.getElementById("submit-btn").addEventListener("click", function() {
let text = document.getElementById("text-box").value;
let li = document.createElement("li");
li.setAttribute = ("id", "list");
li.id = "liId";
li.innerText = text;
document.getElementById("unordered-list").appendChild(li);
let button = document.createElement("button");
button.innerText = "X";
button.setAttribute = ("id", "b1");
li.appendChild(button);
button.addEventListener("click", () => li.parentNode.removeChild(li));
document.getElementById("unordered-list").appendChild(li);
let button2 = document.createElement("button");
button2.innerText = "Done";
button2.id = "b2";
button2.classList.add('buttonClass');
li.appendChild(button2);
li.appendChild(button);
li.appendChild(button2);
document.querySelectorAll('.buttonClass').forEach(item => {
item.addEventListener('click', event => {
change()
})})});
function change() {
document.querySelectorAll("#b2").forEach(item => {
item.parentNode.style = "text-decoration: line-through;"
})}
document.getElementById("clear-field-btn").addEventListener('click', event => {
document.querySelectorAll("#b2").forEach(item => {
item.parentNode.remove();
})
})
<html>
<body>
<header id="to-do-box">
<h1>To-Do List</h1>
<div id="top-half">
<form>
<input type="text" id="text-box" placeholder="Add an item!">
<button type="button" id="submit-btn">Submit</button>
<button type="button" id="clear-field-btn">Clear field</button>
</form>
</div>
</header>
<div id="ul">
<ul id="unordered-list"></ul>
</div>
</body>
</html>Keep in mind though, this will only work for one of the list elements, if you want to discard all of the list elements if the user has multiple, you will need to utilize a forEach function.