I am making a simple ToDo app to learn Javascript and I am trying to implement this strikethrough feature where if the user clicks the "done" button the todo (text) is striked through.
I tried a few methods but none of them seem to work , they affect my done and delete buttons as well
function addToDo() { var Input = document.getElementById("enter").value // gets input from input box var list = document.getElementById('todos'); // gets the list div from html doc var entry = document.createElement('li'); // creats a new list element entry.setAttribute('id', 'ToDo') // adds id to list element var deleteTodo = document.createElement("button"); // creates a button var doneTodo = document.createElement("button"); deleteTodo.setAttribute('id', 'deletetodobtn') doneTodo.setAttribute('id', 'deletetodobtn') deleteTodo.innerHTML = "Delete " // button text doneTodo.innerHTML = "Done" doneTodo.onclick = function doneTodo() { // function to delete list element (todo) entry.innerText = entry.textContent.strike() } deleteTodo.onclick = function deleteTodo() { // function to delete list element (todo) entry.remove() } entry.textContent = Input // adds input text to list element list.appendChild(entry); // adds element to list entry.appendChild(deleteTodo); // appends the button entry.appendChild(doneTodo); document.getElementById("enter").value = ""; // reinitialises text field with ""}document.addEventListener("keypress", function onEvent(event) { // if enter is clicked todo is added if (event.key === "Enter") addToDo()})@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@700&display=swap');body { background: #fd746c; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #ff9068, #fd746c); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #ff9068, #fd746c); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */}h1 { color: #ffffff; font-family: 'JetBrains Mono', monospace; font-size: 5vw; text-align: center; margin-top: -4%; -webkit-text-stroke: 2px black;}@media only screen and (max-width: 600px) { h1 { font-size: 15vw; margin-top: 0%; }}ul { display: table; margin: 0 auto; font-family: 'JetBrains Mono', monospace; font-size: 20px; color: white;}#enter { font-family: 'JetBrains Mono', monospace; font-size: 20px; border-radius: 10px; width: 30em;}@media only screen and (max-width: 600px) { #enter { width: 15em; }}#deletetodobtn { font-family: 'JetBrains Mono', monospace; margin-left: 30px; margin-top: 20px; background-color: #ff4242; /* Green */ border: none; border-radius: 20px; color: white; padding: 10px 10px; text-align: center; text-decoration: none; display: inline-block; font-size: 14px;}#deletetodobtn:hover { background-color: #4d0e0e; transition: background-color 0.2s ease-in;}#add { font-family: 'JetBrains Mono', monospace; margin-left: 20px; margin-top: 10px; background-color: #0d0f29; /* Green */ border: none; border-radius: 20px; color: white; padding: 10px 10px; text-align: center; text-decoration: none; display: inline-block; font-size: 15px;}#add:hover { background-color: #4049c5; transition: background-color 0.2s ease-in;}#center { text-align: center; margin-top: 10%;}.strike { /* strikethrough done todo */ text-decoration: 'line-through'}<body><center><div id="center"><h1>ToDo List</h1><input type="text" id="enter" placeholder="Enter ToDo ..."><button onclick="addToDo()" id="add"> Add ToDo </button><ul id="todos"><ul></div></center><script src="script.js" defer></script></body>I have tried to approach the problems in a few ways :
1. adding a CSS class to the todo list element which strikesthrough on button click
doneTodo.onclick = function doneTodo(){ // function to delete list element (todo) entry.classList.add('strike'); } .strike{ /* strikethrough done todo */ text-decoration: 'line-through'}This does not have any effect
2. using the strike() method
I have tried a few variations :
1. innerHTML
doneTodo.onclick = function doneTodo(){ // function to delete list element (todo) entry.innerHTML=entry.textContent.strike() } This produces :
2. innerText
doneTodo.onclick = function doneTodo(){ // function to delete list element (todo) entry.innerText=entry.textContent.strike() } Which produces this:
Is it possible to implement this feature without affecting my done or delete buttons ?