Javascript 我使用clear timeout函数在一段时间后删除它的udage，这样当我再次单击空字符串上的AddTodo时，它会显示消息_Javascript_Html

Javascript 我使用clear timeout函数在一段时间后删除它的udage，这样当我再次单击空字符串上的AddTodo时，它会显示消息

javascript html

Javascript 我使用clear timeout函数在一段时间后删除它的udage，这样当我再次单击空字符串上的AddTodo时，它会显示消息,javascript,html,Javascript,Html,当我单击Addtodo按钮空字符串时，它会显示一条错误消息，其不透明度在2秒后变为0，但当我再次尝试单击同一按钮时，它不会显示错误消息。请帮我解决这个问题。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale

当我单击Addtodo按钮空字符串时，它会显示一条错误消息，其不透明度在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>

解决上述问题

函数

设置超时

返回一个超时id，该id应稍后在

clearTimeout

函数中使用：例如

 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)
    } 
}

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);

工作小提琴：

重要提示：

cleatTimeout（）

只接受一个参数，即从

setTimeout（）返回的超时id

第一个问题是：

clearTimeout(opa,1000)

您尝试删除超时，但opa是不透明度值

第二个问题是不透明度。在出现第一个错误后，您已将“.warn”的不透明度设置为0。当出现其他错误时，您将看不到文本，因为不透明度为0

我的解决办法是：

 if (ivalue == "") {
            // var errorP = document.createElement("p")
            // errorP.textContent = "Enter your ToDo!"

            setTimeout(() => {
                document.querySelector(".warn").innerHTML="Enter your ToDo!";
            }, 1000);
            setTimeout(() => {
               document.querySelector(".warn").innerHTML="";
            }, 2000);
        }

您试图用

清除超时（opa，1000）

清除哪个计时器？另外，

clearTimeout（）

只接受一个参数，

的作用是什么？但在此之后，当我再次单击addtodo按钮时，我希望它再次显示消息。感谢您的帮助