Why do I get Nan?

Question

I would like to sum two numbers but when I want to display the result of these two values, I have an error message: NaN ? :S

image 1

image 2

By looking on this page:

Why do I get NaN from I function in JavaScript

If I understand correctly, I have a variable that is empty?

I don't see what is blocking?

let ws = new WebSocket('wss://stream.binance.com:9443/ws/btcusdt@trade');
let stockPriceElementsec2 = document.getElementById('value1');
let stockPriceElementsec3 = document.getElementById('value2');

let lastPrice = null
let stockObject = null;

let val1 = null;
let val2 = null;
let sum = null;

ws.onmessage = (event) => {
    stockObject = JSON.parse(event.data);
};


setTimeout(() => {
    if (stockObject === null) {
        return;
    }
    let price = parseFloat(stockObject.p).toFixed(2);

    stockPriceElementsec2.innerText = price;
    stockPriceElementsec2.style.color = !lastPrice || lastPrice === price ? 'black' : price > lastPrice ? '#AAFF00' : 'red';

    lastPrice = price;
    stockObject = null;

    //console.log("Element 1 => " + lastPrice);
    val1 = lastPrice;
    console.log("Element 1 => " + val1);

}, 2000);


setTimeout(() => {
    if (stockObject === null) {
        return;
    }
    let price = parseFloat(stockObject.p).toFixed(2);

    stockPriceElementsec3.innerText = price;
    stockPriceElementsec3.style.color = !lastPrice || lastPrice === price ? 'black' : price > lastPrice ? '#AAFF00' : 'red';

    lastPrice = price;
    stockObject = null;

    //console.log("Element 2 => " + lastPrice);
    val2 = lastPrice;
    console.log("Element 2 => " + val2);

}, 3000);


sum = document.getElementById("result").innerHTML = (parseInt(val1) + parseInt(val2));
console.log(sum);

...

<div class="container ">
    <div class="row">
      <br /><br />
      <div id="no-more-tables">
        <table class="col-md-12 table-bordered table-striped table-condensed cf ">
          <thead class="cf">
            <tr>
              <th>Current course</th>
              <th class="numeric w7 text-center">Value 1</th>
              <th class="numeric w7 text-center">Value 2</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>BTC</td>
              <td class="numeric"><span id="value1"></span></td>
              <td class="numeric"><span id="value2"></span></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <br />
  <p>Sum : <span id="result"></span></p>

Please improve your title. Try to think of something that someone else with a similar problem might search in the future. — The Fool, Dec 22 '22 at 22:48
`stackObject.p` is probably null. Check the incoming data from the websocket. — MrDiamond, Dec 22 '22 at 22:51
`NaN` is not an error message. You’re calculating `parseInt(val1) + parseInt(val2)` while both variables are still `null`. `val1` gets populated two seconds after that, and `val2` three seconds after that. Why do you even have these timeouts instead of doing these calculations in the `message` event handler? Please familiarize yourself with asynchronous execution. — Sebastian Simon, Dec 22 '22 at 22:54
You do the summation directly in your code after the page is loaded while the variables are only set **later on** during `setTimeout`. So at the moment you do the summation the variables still don't have a value yet. — NineBerry, Dec 22 '22 at 22:56
@elodie Checkout this simplified setup: https://codepen.io/kostasx/pen/YzjXVLv?editors=0011 We are initiating the timers when we get the first message to ensure that the timers will work with real data and not null values. Hope it helps. — Kostas Minaidis, Dec 22 '22 at 23:21

Why do I get Nan?

0 Answers0