Hi there! I'm just starting out with JS, HTML, and CSS and I could really use some help. I've been researching solutions but I'm struggling to apply them to my specific situation. I'm trying to add an onClick function to Button 2 and implement a strikethrough effect, but I'm not quite sure how to do it. Any guidance would be greatly appreciated!
This is the JavaScript code I have so far:
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;"
});
}
And here's the HTML code:
<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>