If the downvoters could leave a reason. That'd be great.
Lets say I have a value of 10 on my web page, and a button.
Every time a user clicks on this button, I want to have a visual indication of the value decreasing by 1.
When value is 0 (after 10 clicks) it will hide a div, and show another one.
However when clicking the button, not only the counter needs to reduce by 1 but it also needs to open a window. (It's the same window every click)
On every click I'd also like to change style="width:x%"`` with 10-20-30% and so forth. (But with a delay of 5 seconds)
Does anyone have an idea on how to do all of this, without going overboard on the amount of code.
Here the steps:
- Click button
- Window opens
- Counter goes from 10 to 9
- After 5 seconds have passed the progress bar's style switches to
width: 10%;
...
Counter reaches 0:
- Hide div X (fadeout)
- Show div X
source code:
function countdown() {
var i = document.getElementById('counter');
if (parseInt(i.innerHTML)<=0) {
//hide div
//show div
}
i.innerHTML = parseInt(i.innerHTML)-1;
window.open("");
//change loader
}