Currently it gives the result of checkStatus, which returns nothing, to the setInterval.
You should remove the brackets in this line: setInterval(checkStatus(), 1000);, like this: setInterval(checkStatus, 1000);, to give a reference to the function itself.
Two things
in setInterval, either user setInterval(function(){checkStatus()}, 1000); or setInterval(checkStatus, 1000);
use state.TPlus instead of state.Tplus
setInterval(checkStatus, 1000);
function checkStatus(){
state.TPlus++;
displayTplus.innerHTML = state.TPlus;
}
I am trying to recreate the look DM-2 flight software, considering it was written in JS. I am trying to make a countdown clock. But when I go to update the innerHTMl, it spits out NAN, and the function does not repeat. Any clues would be helpful.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Dragon OS</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div id="statusBarContainer">
<button id="statusCloseButton" onclick="hideStatusRight()"><p id="closeButtonText">Close</p></button>
<div id="statusBar">
<h1>State:</h1>
<h2 id="statusState">Startup</h2>
<h1>T+:</h1>
<h2 id="statusTplus">-60</h2>
</div>
</div>
<div id="topBar">
<button class="borderButton">Home</button>
<button class="borderButton">Attitude</button>
<button class="borderButton">Target</button>
<button class="borderButton">Orbit Info</button>
<button class="borderButton">Docking</button>
<button class="borderButton">Procedures</button>
<button class="borderButton">Communication</button>
<button class="borderButton">Vehicle</button>
<button class="borderButton">Calculator</button>
<button class="borderButton redText" onclick="abort()">Emergency</button>
</div>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="statusUpdate.js"></script>
</body>
</html>
JS
var displayState = document.getElementById("statusState");
var displayTplus = document.getElementById("statusTplus");
var state = {
altitude : 0,
abort : false,
pitch : 0,
yaw : 0,
roll : 0,
inAtmopshere : true,
TPlus : -60
};
setInterval(checkStatus(), 1000);
function checkStatus(){
state.TPlus++;
displayTplus.innerHTML = state.Tplus;
}
function abort(){
state.abort = true;
displayState.style.color = "red";
displayState.innerHTML = "ABORT";
}
state.Tplus should be state.TPlus
Well, I am stupid. But now it won’t continue to update, it only shows -60 and nothing more, no countdown.
statusTplus not displayTplus
displayTPlus is statusTPlus, as defined as the second variable
It appears to be an issue with set interval rather than inner html or the function itself
Fixed it! Legend! Thank you