[英]How to use setTimeOut to repeat a text?
当我单击“添加文本”按钮并且输入为空时，下面会显示一条消息，并在 3 秒后将其删除。 此后，每当我单击它时，它都不会显示该消息，因为我使用remove()删除该消息。 我想在单击 then 按钮时显示此消息。 以及如何在不使用绝对值的情况下发送 position 消息。
const inputVal = document.getElementById("two"); const txtr = document.getElementById("one"); const btnr = document.getElementById("btn"); const dlt = document.getElementById("three"); function myFunction() { if (inputVal.value == "") { var msgs = document.getElementById("para"); msgs.innerHTML = "Enter Something Here "; msgs.classList.add("okay"); setTimeout(() => msgs.remove(), 3000); } else { const x = document.createElement("li"); x.setAttribute('id', "demo"); var y = document.createTextNode(inputVal.value); x.appendChild(y); txtr.appendChild(x); inputVal.value = ""; } } function removeChild1() { var item = document.getElementById('demo'); txtr.removeChild(txtr.lastChild); }
body { display: flex; justify-content: center; align-items: center; margin-top: 5%; }.container { border: 2px solid grey; width: 500px; height: 500px; border-radius: 10px; background-color: lavender; }.input-values { height: 90%; overflow: auto; }.second { display: flex; flex-direction: row; justify-content: center; align-content: center; height: 10%; }.input-values h1 { text-align: center; color: lightsalmon; }.second input { width: 70%; height: 20px; border: 2px solid grey; }.second button { margin-left: 3px; background-color: lightcoral; border: 2px solid lightcoral; border-radius: 5px; width: 80px; height: 28px; }.okay { color: red; font-size: 13px; text-align: right; position: absolute; top: 520px; left: 310px; }
<.DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="stylesheet" href="new,css"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> </head> <body> <div class="container"> <div class="input-values"> <h1>Add Some Text</h1> <ol class="txt" id="one"> </ol> </div> <div class="second"> <input type="text" name="" id="two" placeholder="Enter Your Text "> <p id="para" class="okay"></p> <button id="btn" onclick="myFunction()">Add Text</button> <button id="three" onclick="removeChild1()">Delete</button> </div> </div> </body> </html>
不要删除元素，只需清除其内容。
我不确定你为什么要这样做msgs.classList.add("okay") ，因为它已经在 HTML 中有 class 。
const inputVal = document.getElementById("two"); const txtr = document.getElementById("one"); const btnr = document.getElementById("btn"); const dlt = document.getElementById("three"); function myFunction() { if (inputVal.value == "") { var msgs = document.getElementById("para"); msgs.innerHTML = "Enter Something Here "; msgs.classList.add("okay"); setTimeout(() => msgs.innerHTML = "", 3000); } else { const x = document.createElement("li"); x.setAttribute('id', "demo"); var y = document.createTextNode(inputVal.value); x.appendChild(y); txtr.appendChild(x); inputVal.value = ""; } } function removeChild1() { var item = document.getElementById('demo'); txtr.removeChild(txtr.lastChild); }
body { display: flex; justify-content: center; align-items: center; margin-top: 5%; }.container { border: 2px solid grey; width: 500px; height: 500px; border-radius: 10px; background-color: lavender; }.input-values { height: 90%; overflow: auto; }.second { display: flex; flex-direction: row; justify-content: center; align-content: center; height: 10%; }.input-values h1 { text-align: center; color: lightsalmon; }.second input { width: 70%; height: 20px; border: 2px solid grey; }.second button { margin-left: 3px; background-color: lightcoral; border: 2px solid lightcoral; border-radius: 5px; width: 80px; height: 28px; }.okay { color: red; font-size: 13px; text-align: right; position: absolute; top: 520px; left: 310px; }
<.DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="stylesheet" href="new,css"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> </head> <body> <div class="container"> <div class="input-values"> <h1>Add Some Text</h1> <ol class="txt" id="one"> </ol> </div> <div class="second"> <input type="text" name="" id="two" placeholder="Enter Your Text "> <p id="para" class="okay"></p> <button id="btn" onclick="myFunction()">Add Text</button> <button id="three" onclick="removeChild1()">Delete</button> </div> </div> </body> </html>
如何在 if 条件下不使用 setTimeout 重复 function？
[英]How do I not repeat function with setTimeout with if condition?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.