I have used clear timeout fuction to remove its udage after some time so that when I click the Add ToDo again on empty string it displays message
Question
When I click on Add ToDo button empty string, it displays a error message whose opacity becomes 0 after 2 seconds but when I try to click again on same button it displays no error message. Help me regarding this.
<!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 code is Here
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)
}
}
Solve the above issue
3 answers
solution1
0 2020-04-17 06:46:49
Function setTimeout returns an id of timeout that should be used later at clearTimeout function: eg
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)
solution2
0 2020-04-17 07:08:14
This is what you are really doing right now:
1. Click the button
2. After 1 second, show "Enter your ToDo!"
3. After another second, set its opacity to 0
The 1 second delay before showing the text makes you think that you need to click the button twice.
This is what I supposed you're intended to do:
1. Click the button
2. Immediately shows "Enter your ToDo!"
3. After 1 second, set its opacity to 0
And for that you might need this code:
document.querySelector(".warn").innerHTML="Enter your ToDo!";
var opacityTimeout = setTimeout(() => {
document.querySelector(".warn").style.opacity = "0";
clearTimeout(opacityTimeout);
}, 2000);
Working fiddle: https://jsfiddle.net/5hc3jzma/
Important note:
cleatTimeout() takes only one argument, which is the timeout id returned from setTimeout()
solution3
0 ACCPTED 2020-04-17 07:32:22
The first problem is here:
clearTimeout(opa,1000)
You try to remove timeout, but opa is the opacity value.
The second problem is with opacity. After the first error you have set opacity of ".warn" to 0. When other errors come you won't see text, because opacity is 0.
My solution is:
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);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.