Increment not working with setInterval

Question

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>

Where are your semicolons? In Javascript every statement must end with a semicolon — flen, Jun 11 '17 at 04:56
@ThomasJamesTiam-Lee Are you sure? I was pretty sure they were required... and @ HyperMonkey, perhaps you want to change `setInterval` to `setTimeout` ? This way you could put it inside the function — flen, Jun 11 '17 at 05:05
I'm glad it's working:) ThomasJamesTiam-Lee answer has many great points, please remember to clear your intervals when using `setInterval`. For this reason, it's interesting to always assign the interval to a variable (I mean something like this: `var myInterval = setInterval(...`), because this way you get the `int` needed for the `clearInterval` function (it will be assigned to this variable, e.g. `myInterval === 4`). Then you can clear the interval like this `clearInterval(myInterval);`, using the variable as argument to the `clearInterval` function. BTW, excellent work for a teenager!:) — flen, Jun 11 '17 at 05:13
Sorry for so many comments, but here it states that semicolons are required https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement (I was pretty sure I read that before, and even incurred in a bug for not using semicolons). Although not using semicolons might work, it's mostly recommended to use them always https://stackoverflow.com/questions/444080/do-you-recommend-using-semicolons-after-every-statement-in-javascript — flen, Jun 11 '17 at 06:22

score 2 · Accepted Answer · answered Jun 11 '17 at 05:02

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:

setInterval()'s second parameter is the time in milliseconds, not seconds. Thus, you have to change that to 1000. (1 second = 1000 milliseconds).
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.
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)
}

prasanth · Answer 2 · 2017-06-11T05:07:21.573

Already you have while loop.Dont use setInterval its go to the loop problem.Better remove the setInterval and add temp++ in while .And your statement was not closing properly .Add with ; each line end

Updated

Do direct with setInterval instead of while for time interval

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 timer = setInterval(function(){ 
  
  if(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> ";
    temp++
  }
  else{
  clearInterval(timer)
  }
  },500)
}

<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>

thanks for the suggestion, but what i was trying to achieve was to have a few seconds break before each division statement, so i added an setInterval to give it that break but for some reason it would not work . — HyperMonkey, Jun 11 '17 at 05:02
To make it clear my main motive is to have a few seconds between each reaminder instead of it all coming out at once — HyperMonkey, Jun 11 '17 at 05:02
@HyperMonkey see my updated answer. `Do direct with setInterval instead of while for time interval`.while loop not have time interval property — prasanth, Jun 11 '17 at 05:07

Increment not working with setInterval

2 Answers2