KikePeris KikePeris - 27 days ago 8
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

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.

Comments