I made a simple timer in javascript using a for loop, but upon clicking the button to call the function test(), the whole page freezes up so I assume I have an infinite loop somewhere
This is my code:
<html>
<head>
<script>
function test() {
var HowLong = 5;
for (var i=0;i<HowLong;i--) {
document.write(HowLong[i] + "<br>");
}
}
</script>
</head>
<body>
<input type="button" onclick="test()" value="Start Timer">
</body>
</html>
Yes you have infinite loop problem in the for loop:
for (var i=0;i<HowLong;i--)
Instead of i-- try i++
for (var i=0;i<HowLong;i++)
One more thing HowLong is not an array so you can't use HowLong[i], just simply use :
document.write(i+ "<br>");
As @jfriend00 has mentioned in comments When you use document.write() after the document is loaded, it will clear the current document and start a new one. In your case your button Start Timer will be cleared. If you want to avoid it you can use div and add value to it.
<html>
<head>
<script>
function test() {
var HowLong = 5;
for(var i=0;i<HowLong;i++) {
document.getElementById("myDiv").innerHTML += i + "<br>";
}
}
</script>
</head>
<body>
<input type="button" onclick="test()" value="Start Timer">
<div id="myDiv"></div>
</body>
</html>
document.write() after the document is loaded, it will clear the current document and start a new one.Try this;
for (var i=0;i<HowLong;i++) {
document.write(i + "<br>");
}
0, 1, 2, etc of a number (HowLong[i]). Numbers don't have such properties, arrays usually do.<html>
<head>
<script>
var HowLong = 5;
var isRun = false;
function mf(i){
document.getElementById('myAnchor').innerHTML = i;
}
function rt(i)
{
setTimeout(function(){
mf(i++);
if(i!=HowLong+1)rt(i);
else isRun = false;
}, 1000); // 1000ms = 1sec
}
function test() {
var i = 1;
if(!isRun)
{
isRun = true;
rt(i);
}
}
</script>
</head>
<body>
<div id="myAnchor"></div>
<input type="button" onclick="test()" value="Start Timer">
</body>
</html>
you forget to add delay in your loop
HowLongis a number, but you are trying to use it like an object (HowLong[i]). You probably want to useionly. c) Even if you fix that, you wouldn't actually see the change of each iteration. The execution of the loop is so instantaneous that you will only see the change of the last iteration. I recommend to read a tutorial about basic data types in JavaScript: developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/…