I am new to HTML and javascript. I have below code with me which runs progress bar on clicking button. Can anybody help me below points :- 1) Making it independent of button. It should start executing automatically. 2) Can I introduce delay in executing. eg start executing after 10sec 3) Can i change color once progress in 100% to yellow?
function move() {
var elem = document.getElementById("myBar");
var width = 5;
var id = setInterval(frame, 100);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
}
}
}#myProgress {
width: 40%;
background-color: #ddd;
}
#myBar {
width: 0%;
height: 30px;
background-color: #4CAF50;
text-align: center;
line-height: 30px;
color: white;
}<div id="myProgress">
<div id="myBar">0%</div>
</div>
<br>
<button onclick="move()">Click Me</button>I am new to HTML and javascript. I have below code with me which runs progress bar on clicking button. Can anybody help me below points :- 1) Making it independent of button. It should start executing automatically. 2) Can I introduce delay in executing. eg start executing after 10sec 3) Can i change color once progress in 100% to yellow?
function move() {
var elem = document.getElementById("myBar");
var width = 5;
var id = setInterval(frame, 100);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
}
}
}#myProgress {
width: 40%;
background-color: #ddd;
}
#myBar {
width: 0%;
height: 30px;
background-color: #4CAF50;
text-align: center;
line-height: 30px;
color: white;
}<div id="myProgress">
<div id="myBar">0%</div>
</div>
<br>
<button onclick="move()">Click Me</button>4 Answers
Reset to default 3You have many events in JavaScript. Instead of click event you can listen for Load event on body:
<body onload="move()">
For delay you can use setTimeout like this:
<body onload="setTimeout(function(){move()},10000)">
However it is better to use setTimeout inside the function itself not in onload attribute.
- More about JavaScript events.
- More details about Timing functions.
- Learn how to change the styles using JavaScript.
To start your code when the page loads, you can add an onload tag in the body. Like this:
<body onload='move();'>
<div id="myProgress">
<div id="myBar">0%</div>
</div>
<br>
===THE REST OF YOUR JAVASCRIPT===
</body>
</html>
(You can remove the button) This code will call your 'move' function the moment the body has loaded.
To make a delay in executing, you should make another function called 'wait' (or something of the sort). When the page loads, you should use the javascript 'setTimeout()' function to call your 'move()' function after 10 seconds. It should look like this:
<!DOCTYPE html>
<html>
<style>
#myProgress {
width: 40%;
background-color: #ddd;
}
#myBar {
width: 0%;
height: 30px;
background-color: #4CAF50;
text-align: center;
line-height: 30px;
color: white;
}
</style>
<body onload='setTimeout(move, 10000);'>
<div id="myProgress">
<div id="myBar">0%</div>
</div>
<br>
<script>
function move() {
var elem = document.getElementById("myBar");
var width = 5;
var id = setInterval(frame, 100);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
}
}
}
</script>
</body>
</html>
(Note how the ten seconds is in miliseconds)
To turn the bar yellow, you can add a line of code in your if statement which calls clearInterval() and do a simple
elem.style.color = 'yellow';
The function should look like this:
function frame() {
if (width >= 100) {
elem.style.backgroundColor = 'yellow';
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
}
}
I hope this helps!
Similar to what Ali is saying, I would create a new variable (inside of <script></script>) that triggers the function after your specified amount of time:
const moveDelay = setTimeout(() => move(), 10000)
You can then put this inside your onload prop.
<body onload='moveDelay'>
I would refrain from putting the timeout inside of move() as it will make it harder to read, and if you want to remove the timeout altogether at some point this would make it easier to refactor your code.
1- Making it independent of button
You could make the function move an IIFE
(function move() {
// ...
})();
2- Can I introduce delay in executing. i.e start executing after 10sec
You can use setTimeout to delay the automatic start of the function. If you do this, then you don't need to use the IIFE mentioned before.
setTimeout(move, 10000);
3) Can I change color once progress in 100% to yellow?
You can get the bar html element and modify the style property accordingly (you already got the element in the var elem).
document.getElementById('myBar').style.backgroundColor = 'yellow';
// or
elem.style.backgroundColor = 'yellow'
If you do this, remember to reset the color to the initial state when running move again: elem.style.backgroundColor = '#4CAF50'
Side note: You may want to store the interval id and clear it at the beginning of the function, just in case the user click the click me button before the loading bar finished.
See it in action with the below snippet.
var id;
function move() {
clearInterval(id); // rest the interval id
var elem = document.getElementById("myBar");
elem.style.backgroundColor = '#4CAF50'; // reset color
var width = 5;
id = setInterval(frame, 100);
function frame() {
if (width >= 100) {
clearInterval(id);
elem.style.backgroundColor = 'yellow';
} else {
width++;
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
}
}
}
setTimeout(move, 10000);#myProgress {
width: 40%;
background-color: #ddd;
}
#myBar {
width: 0%;
height: 30px;
background-color: #4CAF50;
text-align: center;
line-height: 30px;
color: white;
}<div id="myProgress">
<div id="myBar">0%</div>
</div>
<br>
<button onclick="move()">Click Me</button>