I am currently working on a website ticker tape and have successfully gathered all the necessary data. However, I am facing an issue with changing the color of the daily price change based on whether it is positive or negative. I'm unsure where to begin troubleshooting this. Any guidance would be highly appreciated.
HTML:
<div id="tickerwrap">
<marquee>
<div style="display: inline-block; font-size: 150%">| Apple inc.</div>
<div style="display: inline-block; font-size: 150%" id=AAPLp></div>
<div style="display: inline-block; font-size: 150%" id=AAPLchg%></div>
<div style="display: inline-block; font-size: 150%">| Amazon inc.</div>
</marquee>
</div>
<script>
document.onreadystatechange = function() {
if (document.readyState === 'complete') {
tickertape();
}
};
JS:
function tickertape() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var tickertape = JSON.parse(this.responseText);
document.getElementById("AAPLp").innerHTML = tickertape["AAPL"]["quote"]["latestPrice"];
document.getElementById("AAPLchg%").innerHTML = tickertape["AAPL"]["quote"]["changePercent"];
document.getElementById("AAPLchg").innerHTML = tickertape["AAPL"]["quote"]["change"];
document.getElementById("AMZNp").innerHTML = tickertape["AMZN"]["quote"]["latestPrice"];
document.getElementById("AMZNchg%").innerHTML = tickertape["AMZN"]["quote"]["changePercent"];
document.getElementById("AMZNchg").innerHTML = tickertape["AMZN"]["quote"]["change"];
// Add logic here to change text color based on positive/negative values
}
};
xhttp.open("GET", "https://cloud.iexapis.com/v1/stock/market/batch?&types=quote&symbols=aapl,amzn&token=pk_6925213461cb489b8c04a632e18c25dd", true);
xhttp.send();
}