Hey experts on stack overflow!
I came across this script that allows me to fetch stock information from Yahoo. However, I'm facing an issue where the script only works for one div when I try to use it in multiple divs. I'm not a coder, so I'm struggling to identify the problem and find a solution.
Below is the code for fetching Yahoo stock info for Google, along with a checker function after the div loads:
<div class="table-box">
<div class="table-detail">
<img width="159px" src="http://patrickcoombe.com/wp-content/uploads/2015/09/new-google-logo-2015.png" />
</div>
<div class="table-detail">
<p class="text-muted m-b-0 m-t-0">GOOGLE</p>
<h4 class="m-t-0 m-b-5"><b><div id='GOOGstock'>$</div></b></h4>
<script type="text/javascript">
function GOOGstock() {
var url = "http://query.yahooapis.com/v1/public/yql";
var symbol = "GOOG";
var data = encodeURIComponent("select * from yahoo.finance.quotes where symbol in ('" + symbol + "')");
$.getJSON(url, 'q=' + data + "&format=json&diagnostics=true&env=http://datatables.org/alltables.env")
.done(function (data) {
$("#GOOGstock").text("Stock Price: " + "$" + data.query.results.quote.LastTradePriceOnly);
})
.fail(function (jqxhr, textStatus, error) {
var err = textStatus + ", " + error;
$("#GOOGstock").text('Request failed: ' + err);
});
}
var int=setInterval('check()', 500);
function check()
{
if (chkObject('GOOGstock')==true)
{
GOOGstock();
}
}
function chkObject(elemId)
{
return (document.getElementById(elemId))? true : false;
}
</script>
</div>
</div>
While this works fine individually, when I try to duplicate it for another stock (replace GOOG with INTC for a different bid price), it only works for the one that is placed last in the HTML code.
Screenshot - Check out the screenshot of the two divs created for Yahoo stock here.
Can you help me make it work on one page in different places for different stocks? I specifically want to display the bid price for "INTC" and "GOOG" stocks.
Thank you all in advance.