当我单击“添加待办事项”按钮为空字符串时，它显示一条错误消息，其不透明度在2秒后变为0，但是当我尝试再次单击同一按钮时，它不显示任何错误消息。帮我解决这个问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Gotu&display=swap" rel="stylesheet">
<title> Simple ToDo Application</title>
</head>
<body>
<div id="container">
<div class="controls">
<h1>My ToDo's </h1>
<input type="text" id="input">
<p class="warn"></p>
<button type="button" id="add">Add ToDo</button>
<button type="button" id="remove">Remove ToDo</button>
<button type="button" id="rEverything">Clear Whole List</button>
</div>
</div>
<script src="todo.js"></script>
</body>
</html>
MY JS代码在这里
var ul = document.getElementById("list")
var li;
var addButton = document.getElementById("add")
addButton.addEventListener("click",addItem)
var removeButton = document.getElementById("remove")
removeButton.addEventListener("click",removeItem)
var rEverything = document.getElementById("rEverything")
rEverything.addEventListener("click",rEveryItem)
function addItem(){
var input = document.getElementById("input")
var ivalue = input.value;
var textnode = document.createTextNode(ivalue);
if (ivalue == "") {
// var errorP = document.createElement("p")
// errorP.textContent = "Enter your ToDo!"
setTimeout(() => {
document.querySelector(".warn").innerHTML="Enter your ToDo!";
}, 1000);
setTimeout(() => {
var opa = document.querySelector(".warn").style.opacity = "0";
}, 2000);
clearTimeout(opa,1000)
}
}
解决上述问题
[Function setTimeout返回超时ID，稍后应在clearTimeout函数处使用：例如
cosnt timeout1 = setTimeout(() => {
document.querySelector(".warn").innerHTML="Enter your ToDo!";
}, 1000);
const timeout2 = setTimeout(() => {
var opa = document.querySelector(".warn").style.opacity = "0";
}, 2000);
clearTimeout(timeout1)
这是您现在真正在做的事情：1.点击按钮2. 1秒后，显示“输入您的待办事项！”3.再过一秒钟，将其不透明度设置为0
显示文本之前的1秒钟延迟使您认为您需要单击两次按钮。这就是我想您要执行的操作：1.点击按钮2. 立即显示“输入您的待办事项！”3. 1秒钟后，将其不透明度设置为0
为此，您可能需要此代码：
document.querySelector(".warn").innerHTML="Enter your ToDo!";
var opacityTimeout = setTimeout(() => {
document.querySelector(".warn").style.opacity = "0";
clearTimeout(opacityTimeout);
}, 2000);
工作小提琴：https://jsfiddle.net/5hc3jzma/
重要注意事项：cleatTimeout()仅接受一个参数，这是从setTimeout()返回的超时ID。
第一个问题在这里：