Binance Rest API JSON to HTML

Viewed 771

I have made 2 .js files with the scripts inside them which are then called by app.html

I'm trying to call both the spot price and 24hr rolling percentage change from Binance rest API. My problem is that it prints the percentage change in the spot pricing HTML element. I think it has something to do with the percentage symbol ID being the same as the spot price symbol ID but I'm not sure.

What did I do wrong?

Here are the finance rest API docs.

HTML

<div class="div-block-3">
  <div class="text-block-2"><span class="currency-title">USD</span> <span class="currency-symbol">$</span><strong id="BTCUSDT" class="rates">11,794.00</strong></div>
  <div id="BTCUSDT" class="text-block-6"><strong class="negative">-1.84%</strong></div>
</div>

24hr rolling percentage .js

function load() {
    var url_base = "https://api.binance.com/api/v3/ticker/24hr?symbol="
    var elements = document.getElementsByClassName('text-block-6');
    
    for (var i = 0; i < elements.length; i++) {
        var id  = elements[i].id;
        var url = url_base + id;
        var ourRequest = new XMLHttpRequest();
        ourRequest.open('GET', url, true);

        ourRequest.onload = function () {
            console.log(this.responseText);

            var obj = JSON.parse(this.responseText);
            document.getElementById( obj.symbol ).innerHTML = obj.priceChangePercent;
        };
        ourRequest.send();
    }
}

window.onload = load;

spot pricing .js

function load() {
    var url_base = "https://api.binance.com/api/v3/ticker/price?symbol="
    var elements = document.getElementsByClassName('rates');
    for (var i = 0; i < elements.length; i++) {

        var id  = elements[i].id;
        var url = url_base + id;
        var ourRequest = new XMLHttpRequest();
        ourRequest.open('GET', url, true);

        ourRequest.onload = function () {
            console.log(this.responseText);

            var obj = JSON.parse(this.responseText);
            document.getElementById( obj.symbol ).innerHTML = obj.price;
        };
        ourRequest.send();
    }
}
window.onload = load;
0 Answers
Related