0

So I recently learned how to use jquery to append a paragraph to a div. However, when I want to update the appended paragraph with document.getElementById.innerHTML, it does not appear to work. How do I solve this?

const priceList = document.getElementById("pricebar");
var coinlist = ["BTC", "ETH", "LUNA", "LYXE", "ATOM", "SOL", "AVAX"];
var coinIds = [];
var delayTime = 2000;

const coinNamesAndPrices = document.getElementsByClassName("pricebardata");
const heyyy = document.getElementById("test");

var amountofCalls = 0;

getCoinPrices();

window.setInterval(function() {
    amountofCalls += 1;
    getCoinPrices();
    console.log(amountofCalls);
}, delayTime);


function getCoinPrices(){
    var xmlhttp = new XMLHttpRequest();
    var coinPrices;
    var url = "https://api.nomics.com/v1/currencies/ticker?key=(keyname)=" + coinlist.join();
    var jsonData;
        xmlhttp.onreadystatechange = function(){
            if (this.readyState == 4 && this.status == 200){
                var json = JSON.parse(this.responseText);
                jsonData = parseJson(json);
            }
        }

    xmlhttp.open("GET", url, true);
    xmlhttp.send();
}

function parseJson(json){
    var coinIds = [];
    var coinPrices = [];
    for (i=0; i<coinlist.length; i++){
        coinIds.push(String(json[i]["id"]));
        coinPrices.push(String(json[i]["price"]));
    }

    var coinPricesInt = coinPrices.map(Number);
    var coinPricesRounded2Decimals = coinPricesInt.map(function roundPrices2Decimals(price){
        return price.toFixed(2);
        //return Math.round(price * 100)/100
    })

    if (amountofCalls == 0){
        addPriceDataHTML(coinPricesRounded2Decimals, coinIds);
    }
    else {
        console.log(coinPricesRounded2Decimals);
        coinNamesAndPrices.innerHTML = coinIds[i] + ":" + "     " + "$" + coinPricesRounded2Decimals[i];
    }
}


function addPriceDataHTML(coinPriceDollars, coinNames){
    for (i=0; i<coinNames.length; i++){
        $("#pricebar").append('<p class="pricebardata">' + coinNames[i] + ":" + "     " + "$" + coinPriceDollars[i] + '</p>');
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="pricebar">
    *appended paragraphs with classnames which I want to edit here*
</div>

Would really appreciate any help I can get! Thanks

Abin Thaha
  • 4,493
  • 3
  • 13
  • 41
learningtocode53
  • 1
  • 1
  • Hi, welcome to SO. Please take the time to read the [tour]. You might also like to read [mcve]. You've asked about setting/reading html, but your question code includes ajax requests and a large amount of seemingly unrelated code. Please limit your code to just the relevant parts to the question. – freedomn-m Oct 01 '21 at 08:36
  • Also it seems you use jQuery, why not use $.get instead of the realyl verbose XMLHTTPRequest? – mplungjan Oct 01 '21 at 08:38
  • I'm trying to find the relevant code, but doesn't seem to be any. You have 2x `document.getElementById` but then don't use either of them. And no use of `innerHTML` (that I could see). Please include the relevant code. – freedomn-m Oct 01 '21 at 08:39
  • If you're using jquery, you could *also* use: `$("#pricebar").html()` to get the html – freedomn-m Oct 01 '21 at 08:40
  • You use innerHTML on a HTMLCollection (or NodeList I don't remember) that is the structure returned from getElementsbyClassName. You have to cycle end call innerHTML on a single element – Nick Oct 01 '21 at 08:59

0 Answers0