javascripthtml-listsinnerhtmlinnertextstrikethrough

How to strikethrough a list element using javascript

Website

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 : errorWithstrike() 2. innerText

 doneTodo.onclick = function doneTodo(){ // function to delete list element (todo) 
        entry.innerText=entry.textContent.strike()
      }

Which produces this: errorWithstrike()Innertext

Is it possible to implement this feature without affecting my done or delete buttons ?

Solution

  • Just add your class instead of attempting to modify text. Also, CSS property values aren't usually quoted strings. Exceptions are custom font family names and pseudo-element content.

    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.classList.toggle('strike'); // or just classList.add
  }

  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;
  text-align: center;
}

@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>
  <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>

  <script src="script.js" defer></script>
</body>