How to strikethrough a list element using javascript
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 ?
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>- How to access parent ref from child
- How do i define the fib() function, which returns the next Fibonacci number after each call?
- A returned Promise with Fetch doesn't respond to .then()
- How to trigger inline script onload?
- How to get index of an array element in click event with JavaScript
- Line 6 of this Javascript program is confusing me
- How to use Lightbox on AJAX loaded content
- How to increase quality on a PixiJS canvas?
- is it possible to install canvas with M1 chip
- Executing Javascript from Python
- regex to match HTML <p ...> tag
- How to swap two variables in JavaScript
- Primitive value vs Reference value
- Why would one use a logical AND expression (using the `&&` operator, double ampersand) as a stand-alone statement?
- Error copying 2d array contents to Google Sheets column
- how to pass values to :nth-child() css selector in cypress
- How to validate email by whitelist domain regex
- Passing checkbox value to show / hide Password via react native
- MUI with Preact & HTM No Build Setup
- Drag and drop items from different groups
- In React, what's the difference between onChange and onInput?
- Accessing http status code constants
- Next.js middleware Module not found: Can't resolve 'fs'
- How to parse JSON response in Google App Script?
- Chaining on an Array.find() in JavaScript
- NextJS - Update data object being passed into Child Component based on Button Click
- Close Modal when clicked on other div
- Convert relative path to absolute using JavaScript
- React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing
- Add A Year To Today's Date