I'm making a todolist that add item when I click on add button. For the first time I click the item, The item is expected to have line-through when I click one time on it. However, I need to double click to have line-through. When I click again to remove line-through and click again, only need one click to have line-through. I don't know where I went wrong. Please help me!
const addButton = document.getElementById("add_but");
const input = document.getElementsByTagName("input");
addButton.addEventListener("click", getText);
function getText() {
//add item
const item = document.createElement("div");
item.classList.add("item");
//add mark and text
const markandText = document.createElement("div");
markandText.classList.add("markandText");
// add text
const to_do_text = document.createElement("span");
to_do_text.classList.add("to_do_text");
// add markicon
const markIcon = document.createElement("span");
markIcon.classList.add("markIcon");
markIcon.innerHTML = "✓";
//add text and markicon to markandtext
markandText.appendChild(to_do_text);
markandText.appendChild(markIcon);
// add button
const delButton = document.createElement("button");
delButton.classList.add("del_but");
delButton.innerHTML = "✕";
// add markandText and button to item
item.appendChild(markandText);
item.appendChild(delButton);
const items = document.getElementById("items");
// add item to items
items.appendChild(item);
if (input[0].value != "") {
item.style.visibility = "visible";
to_do_text.innerHTML = input[0].value;
}
item.addEventListener("click", addStrike);
delButton.addEventListener("click", delFunc);
function addStrike() {
if (markIcon.style.visibility == "hidden") {
markIcon.style.visibility = "visible";
item.style.backgroundColor = "#888888";
to_do_text.classList.add("to_do_text_on");
delButton.classList.add("del_but_on");
} else {
markIcon.style.visibility = "hidden";
to_do_text.classList.remove("to_do_text_on");
delButton.classList.remove("del_but_on");
item.style.backgroundColor = "white";
}
}
function delFunc() {
item.style.display = "none";
}
}body {
padding: 0;
/* margin: 0; */
/* box-sizing: border-box; */
font-family: "Courier New", Courier, monospace;
text-align: center;
}
.list {
width: 80%;
margin: 0 auto;
}
.head {
background: #f44336;
margin-top: 50px;
padding: 50px 0;
}
.title {
color: white;
font-size: 36px;
}
#add_bar {
display: flex;
justify-content: center;
}
input {
padding: 10px;
width: 70%;
border: none;
}
#add_but {
padding: 10px;
width: 140px;
border: none;
background-color: #d9d9d9;
}
button:hover {
cursor: pointer;
}
#items {
display: flex;
/* justify-content: center; */
flex-direction: column;
}
.item {
display: flex;
justify-content: space-between;
border: 1px solid #000;
/* padding: 10px; */
visibility: hidden;
}
.markandText {
display: flex;
}
.to_do_text {
background: white;
color: black;
/* float: left; */
order: 2;
padding: 12px 0;
}
.to_do_text_on {
background: #888888;
color: white;
text-decoration-line: line-through;
text-decoration-color: white;
}
.del_but {
/* float: right; */
order: 3;
padding: 12px;
color: #929b7b;
background-color: white;
border-radius: 0;
border: none;
}
.del_but_on {
color: #E4E1EC;
background-color: #888888;
}
.del_but:hover {
background: #f44336;
color: white;
}
.item:hover {
cursor: pointer;
}
.markIcon {
order: 1;
padding: 12px;
color: white;
visibility: hidden;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="list">
<div class="head">
<p class="title">My To Do List</p>
<div id="add_bar">
<input type="text" placeholder="Title..." />
<button id="add_but">Add</button>
</div>
</div>
<div id="items">
<!-- <div class="item">
<span class="to_do_text">egg</span>
<button class="del_but">x</button>
</div> -->
</div>
</div>
<script src="js.js"></script>
</body>
</html>
This will attempt to read the style set on an element, which does not include the style set in your CSS. So this condition will always be false the first time around unless you were to set the style when creating the span.
If you don't want to set the visibility style, you could also just change the order of your if statement to check against the value
visiblefirst and put the hidden state logic in the else statement