HyperMonkey HyperMonkey -4 years ago 99
Javascript Question

Increment not working with setInterval

When you give the program a seed and max it goes through every number and divides it by 2 and 3 and displays the remainder. I want it to give a second between the time it solves it, to the next one. But whenever I try to use a

setInterval
it freezes and crashes even on 2 different editors. I also have another problem because when you enter a seed and max into the input boxes it wont save the numbers and it uses the ones from the javascript and not the input box. Thanks in advance, I am 11 and started programming a few months ago.

Here is what I have so far:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Made with Thimble</title>
<link rel="stylesheet" >
</head>
<body bgcolor="lightblue">
<div id="d2">
Divisible by 2
</div>
<div id="d3">
Divisible by 3
</div>
<div>
<input id="seed" type="number" placeholder="seed" value="3"><br>
<input id="max" type="number" placeholder="max" value="8">
</div>
<button onclick="count()">Count</button>
<div id="output"></div>
<script>
function count(){

var seed= document.getElementById("seed").getAttribute("value")
var max=document.getElementById("max").getAttribute("value")
var temp=1
var output=document.getElementById("output")
temp=seed
console.log("seed:"+seed)
console.log("max:"+max)
while (temp<max){

var intdivby2 = temp%2
var intdivby3 = temp%3

document.getElementById("output").innerHTML+="remainder of "+temp+" divided
by 2 is:"+intdivby2.toString()+"<br>"
document.getElementById("output").innerHTML+="remainder of "+temp+" divided
by 3 is:"+intdivby3.toString()+"<br>"
setInterval(function(){temp++;},1)

}
}
</script>
</body>
</html>

Answer Source

The site is crashing because you are calling setInterval() inside a loop. Thus, for every cycle of the loop a new timer is being created. This is not what you want to happen.

Here are the things you need to fix:

  1. setInterval()'s second parameter is the time in milliseconds, not seconds. Thus, you have to change that to 1000. (1 second = 1000 milliseconds).

  2. Remove the loop and call setInterval() only once. In the function that happens every 1 second, increase the value of temp and perform the necessary actions.

  3. Once temp exceeds the value of max, call clearInterval() to stop the timer.

Here is the revised count() function:

function count() {
    var seed= document.getElementById("seed").getAttribute("value")
    var max=document.getElementById("max").getAttribute("value")
    var temp=1
    var output=document.getElementById("output")
    temp=seed
    console.log("seed:"+seed)
    console.log("max:"+max)
    var id = setInterval(function(){
        var intdivby2 = temp%2
        var intdivby3 = temp%3

        document.getElementById("output").innerHTML+="remainder of "+temp+" divided by 2 is:"+intdivby2.toString()+"<br>"
        document.getElementById("output").innerHTML+="remainder of "+temp+" divided by 3 is:"+intdivby3.toString()+"<br>"
        temp++;
        if (temp > max) clearInterval(id);
    },1000)
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download