KikePeris KikePeris - 11 months ago 59
HTML Question

Tried to do a chronometer, but failed

I am trying to do the most simple chronometer, just one number that keeps counting infinite. Please keep in mind I am trying to correct my own code, do refrain from answering with "this post is a duplicate of ...", because I probably won't understand other examples. For some reason my code doesn't work, please help.

<!doctype html>
<html>
<head>
<style>
#screen {
position: relative;
border: 2px solid black;
width: 800px;
height: 600px;
top: 50px;
left: 500px;
}

#chronometer {
position: absolute;
top: 150px;
left: 300px;
font-size: 100px;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div id="screen">
<div id="chronometer"></div>
</div>
<script>
var chronometer = setInterval(increaseChronometer, 1000);
function increaseChronometer () {
var chronometerNumber = 1;
document.getElementById("chronometer").innerHTML = chronometerNumber;
chronometerNumber++;
}
</script>
</body>
</html>

Answer Source

You are defining the "chronometerNumber" variable inside the function, so it gets created and initialized to "1" every time you invoke the function.

Just move the line "var chronometerNumber=1" outside the function and it should work fine.