我做了一个todolist添加项目时，我点击添加按钮。对于我第一次单击该项目，当我单击该项目一次时，该项目将具有直通。但是，我需要双击才能通过行。当我再次点击删除线通过和再次点击，只需要一次点击有线通过。我不知道我哪里做错了。请救救我！
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>
2条答案
按热度按时间flseospp1#
这将尝试读取元素上的样式集，该元素不包括CSS中的样式集。因此，除非在创建跨度时设置样式，否则此条件在第一次使用时将始终为false。
如果不想设置可见性样式，也可以更改if语句的顺序，首先检查值
visible，然后将隐藏的状态逻辑放在else语句中iugsix8n2#