CODEWITHSUNDEEP
javascripthtml
Sam Neale
Sam Neale

Reputation: 279

InnerHTML says NAN on update

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";
}

Upvotes: 0

Views: 89

Answers (2)

Ranjit Singh
Ranjit Singh

Reputation: 3735

Two things

  1. in setInterval, either user setInterval(function(){checkStatus()}, 1000); or setInterval(checkStatus, 1000);

  2. use state.TPlus instead of state.Tplus

    setInterval(checkStatus, 1000);

    function checkStatus(){ state.TPlus++; displayTplus.innerHTML = state.TPlus; }

Fiddle: https://jsfiddle.net/ranjitsss/2nk7evds/2/

Upvotes: 0

Gulielmus
Gulielmus

Reputation: 91

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.

Upvotes: 1

Related Questions