My ajax countdown doesn't work as it should? - html

Question

I have here AJAX + HTML and it seems not to be working as it should.
Basically it (work with / use) only the first number (count) and it seems like the rest is forgotten?
My code
<script id="ajax">
var count = 200;
var counter = setInterval(a2, 1000);
function a2() {
count = count - 1;
if (count < 0) {
clearInterval(counter);
return;
}
document.getElementById("a2").innerHTML = count;
}
</script>
<div id="a2"></div>
<script id="ajax">
var count = 100;
var counter = setInterval(a3, 1000);
function a3() {
count = count - 1;
if (count < 0) {
clearInterval(counter);
return;
}
document.getElementById("a3").innerHTML = count;
}
</script>
<div id="a3"></div>
Anyone knows what could be the issue? I feel like I'm totally lost.
Issue no2:
When I push the script into a real-usage, it only seems to execute the first script/code and the next script is being executed after the first script time is runs over. Therefore it second timer appears to be blank if first one is running.
It does work though when I manually put the script into the console.
Any ideas?
Thank you!

Answer 1

The problem here is var in JS is function scoped. Since you used it out of a function, it is pretty much global throughout the whole script. How about you make the counter implementation into a function and call it like this?
<script id="ajax">
function counter (elem, count) {
var counter = setInterval(func, 1000);
function func() {
count = count - 1;
if (count < 0) {
clearInterval(counter);
return;
}
document.getElementById(elem).innerHTML = count;
}
}
counter("a2", 200);
</script>
<div id="a2"></div>
<script id="ajax">
counter("a3", 100);
</script>
<div id="a3"></div>

Answer 2

No, you should add two codes in one setInterval function for executing on same time:
var count1=10;
var count2=5;
var counter=setInterval(a2, 1000);
function a2()
{
if (count1 != 0)
{
count1--;
//Some functions that are dependent of count1, eg.
if(count1==3){document.getElementById("a2").style.color="red";}
}
if (count2 != 0)
{
count2--;
//Some functions that are dependent of count2 eg.
if(count2==3){document.getElementById("a3").style.color="red";}
}
if(count1==0 && count2==0){
clearInterval(counter);
}
console.log('counting!');
document.getElementById("a2").innerHTML=count1;
document.getElementById("a3").innerHTML=count2;
}
<div id="a2"></div>
<div id="a3"></div>
If you have two different functions that are dependent of counters then go with above code

Answer 3

Try this one
var count_a2 = 200;
var counter_a2 = setInterval(a2, 1000);
function a2() {
count_a2 = count_a2 - 1;
if (count_a2 < 0) {
clearInterval(counter_a2);
return;
}
document.getElementById("a2").innerHTML = count_a2;
}
var count = 100;
var counter = setInterval(a3, 1000);
function a3() {
count = count - 1;
if (count < 0) {
clearInterval(counter);
return;
}
document.getElementById("a3").innerHTML = count;
}
<div id="a2"></div>
<div id="a3"></div>