Why isn't the string in this block of code being updated?

I assume this is a small error that I'm missing somewhere. The var JSONurl at the top of the top of the code should be changed by the changecoin() function. However when changecoin() is called by the webpage, the function executes but the JSONurl string doesn't change and stays at its initial value.

/*jslint plusplus: true */
//console.log("javascript is working");
"use strict";

var lastPrice;
var initSet = 0;
var JSONurl = "http://coincap.io/page/XRP";

document.getElementById("dropdown-btc").addEventListener("click", function(){
    changeCoin("btc");
});

document.getElementById("dropdown-eth").addEventListener("click", function(){
    changeCoin("eth");
});

document.getElementById("dropdown-xrp").addEventListener("click", function(){
    changeCoin("xrp");
});



$( document ).ready(function () {
    console.log( "ready!" );
    getRippleVals(JSONurl);
    //setInterval(getRippleVals(JSONurl), 5000);

});


function getRippleVals(JSONurl) {
    console.log("");
    var url = JSONurl;
    console.log("JSON URL: " + url);
    console.log("Gloval JSON URL: " + JSONurl);
    $.getJSON(url,
            function (data) {

            //function commands, not relevant

          });
          setTimeout(getRippleVals, 5000, JSONurl);

}



function bFormatter(num) {
    return num > 999999999 ? (num/1000000000).toFixed(2) + 'Bn' : num
}

function changeCoin(coin)
{
  console.log(coin);
  var coin = coin.toUpperCase();
  $("#dropdownMenuButton").html(coin);

  if(coin === "BTC")
  {
    JSONurl = "http://coincap.io/page/BTC";
    $("#pairing-text").html("BTC : USD");
    lastPrice = 0;
    console.log("JSONurl set to: " + "http://coincap.io/page/BTC");
  }
  else if(coin === "ETH")
  {
    JSONurl = "http://coincap.io/page/ETH";
    $("#pairing-text").html("ETH : USD");
    lastPrice = 0;
    console.log("JSONurl set to: " + "http://coincap.io/page/ETH");
  }
  else if(coin === "XRP")
  {
    JSONurl = "http://coincap.io/page/XRP";
    $("#pairing-text").html("XRP : USD");
    lastPrice = 0;
    console.log("JSONurl set to: " + "http://coincap.io/page/XRP");
  }

}

1 answer

  • answered 2018-01-11 20:52 Andrew Lohr

    The problem is your setTimeout you are calling in getRippleVals you keep passing in the initial JSONurl so it will always be what you first set it.

    It looks like you tried using setInterval (which is the proper way to repeat the function) and you just needed to use an anonymous function to pass in a parameter (JSONurl) to getRippleVals

    "use strict";
    
    var lastPrice;
    var initSet = 0;
    var JSONurl = "http://coincap.io/page/XRP";
    
    document.getElementById("dropdown-btc").addEventListener("click", function() {
      changeCoin("btc");
    });
    
    document.getElementById("dropdown-eth").addEventListener("click", function() {
      changeCoin("eth");
    });
    
    document.getElementById("dropdown-xrp").addEventListener("click", function() {
      changeCoin("xrp");
    });
    
    $(document).ready(function() {
      console.log("ready!");
      getRippleVals(JSONurl);
      //** use setInterval like below
      setInterval(function() {
        getRippleVals(JSONurl)
      }, 5000);
    
    });
    
    function getRippleVals(JSONurl) {
      console.log("");
      var url = JSONurl;
      //console.log("JSON URL: " + url);
      console.log("Global JSON URL: " + JSONurl);
      $.getJSON(url, function(data) {
        //function commands, not relevant
      });
      // take out this setTimeout
      //setTimeout(getRippleVals, 5000, JSONurl);
    
    }
    
    function changeCoin(coin) {
      console.log(coin);
      var coin = coin.toUpperCase();
      $("#dropdownMenuButton").html(coin);
    
      if (coin === "BTC") {
        JSONurl = "http://coincap.io/page/BTC";
        $("#pairing-text").html("BTC : USD");
        lastPrice = 0;
        console.log("JSONurl set to: " + "http://coincap.io/page/BTC");
      } else if (coin === "ETH") {
        JSONurl = "http://coincap.io/page/ETH";
        $("#pairing-text").html("ETH : USD");
        lastPrice = 0;
        console.log("JSONurl set to: " + "http://coincap.io/page/ETH");
      } else if (coin === "XRP") {
        JSONurl = "http://coincap.io/page/XRP";
        $("#pairing-text").html("XRP : USD");
        lastPrice = 0;
        console.log("JSONurl set to: " + "http://coincap.io/page/XRP");
      }
    
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <button id="dropdown-btc">BTC</button>
    <button id="dropdown-eth">ETH</button>
    <button id="dropdown-xrp">XRP</button>