Save the current value and compare it with the new value of a variable in JavaScript

I came through an api that gives me information in json format, received the price of a currency and displayed it on a screen using JavaScript. And of course I put these in a function that ajax updates the information every x seconds.

I need a code that takes the current value of the price, the next value of the price received compares these two, and if the new price is higher than the previous one, for example, the background turns green or gives an alert. And if it was less than the previous one, the background would turn red.

my code:

var auto_refresh = setInterval(
  function() {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        var myObj = JSON.parse(this.responseText);
        document.getElementById("bids1").innerHTML = myObj.BTCUSDT['bids']['0']['0'];
      }
    };
    xmlhttp.open("GET", "all.json", true);
    xmlhttp.send();

  }, 1000);

>Solution :

Correction

Please refer to mplungjan’s answer above for a more correct way to do this. While adding the variable as I specified is a good way to handle this, your existing way to periodically retrieve the data is not the correct way to do it, and you should consider changing it as specified by mplungjan!

Original answer

I would normally recommend using a global variable (or at least outside your function) to keep the current price, and compare the retrieved value to this.

// initialize the current price
let currentPrice = 0;

var auto_refresh = setInterval(function () {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            var myObj = JSON.parse(this.responseText);
            
            let newPrice = myObj.BTCUSDT['bids']['0']['0'];

            if (newPrice > currentPrice) {
                // alert, set some other attribute, etc.

            }

            // update the global variable and the HTML
            currentPrice = newPrice;
            document.getElementById("bids1").innerHTML = currentPrice;
        }
    };
    xmlhttp.open("GET", "all.json", true);
    xmlhttp.send();

}, 1000);

Depending on your requirements, you can of course also do different checks and comparisons inside your http request handler.