如何更改DOM元素的样式

时间:2018-05-06 16:28:04

标签: javascript

这样有一个简单的HTML:

<div id="btc"></div>

一些.js代码如下:

setInterval(function () {
    var HttpClient = function () {
        this.get = function (aUrl, aCallback) {
            var anHttpRequest = new XMLHttpRequest();
            anHttpRequest.onreadystatechange = function () {
                if (anHttpRequest.readyState == 4 && anHttpRequest.status == 200)
                    aCallback(anHttpRequest.responseText);
            }

            anHttpRequest.open("GET", aUrl, true);
            anHttpRequest.send(null);
        }
    }
    var price = 1;
    var client = new HttpClient();
    client.get('https://blockchain.info/ru/ticker', function (response) {
        var fields = ['last'];
        var data = JSON.parse(response);
        var out = [];
        for (var i in data) {
            var d = [];
            for (var j in fields)
                d.push(data[i][fields[j]]);
            out.push(d);
        }
        console.log(out[0]);
        if (out[0] > price) {
            console.log('more');
            document.getElementById('btc').innerHTML = out[0];
            document.getElementById('btc').style.color = "green";
        }
        price = out[0];
        if (out[0] < price) {
            console.log('less');
            price = out[0];
            document.getElementById('btc').innerHTML = out[0];
            document.getElementById('btc').style.color = "red";
        }

    });
}, 1000)

这个想法是用红色或绿色标记价格,以防价格下跌或上涨。 直到现在它只适用于上升(第二个,如果从不工作)。 我做错了什么,如何纠正? ;)

2 个答案:

答案 0 :(得分:1)

您应该删除行price = out[0];并在var price = 1功能之前移动setInterval

下面是正确的代码:

    var price = 1;
    setInterval(function () {
        var HttpClient = function () {
            this.get = function (aUrl, aCallback) {
                var anHttpRequest = new XMLHttpRequest();
                anHttpRequest.onreadystatechange = function () {
                    if (anHttpRequest.readyState == 4 && anHttpRequest.status == 200)
                        aCallback(anHttpRequest.responseText);
                }

                anHttpRequest.open("GET", aUrl, true);
                anHttpRequest.send(null);
            }
        }

        var client = new HttpClient();
        client.get('https://blockchain.info/ru/ticker', function (response) {
            var fields = ['last'];
            var data = JSON.parse(response);
            var out = [];
            for (var i in data) {
                var d = [];
                for (var j in fields)
                    d.push(data[i][fields[j]]);
                out.push(d);
            }
            console.log(price)
            if (out[0] > price) {
                console.log('more');
                price = out[0];
                document.getElementById('btc').innerHTML = out[0];
                document.getElementById('btc').style.color = "green";
            }
            else if (out[0] < price) {
                console.log('less');
                price = out[0];
                document.getElementById('btc').innerHTML = out[0];
                document.getElementById('btc').style.color = "red";
            }
        });
    }, 1000);

答案 1 :(得分:0)

您正在使用代码

price = out[0];
if (out[0] < price) {

看到这段代码。您在out[0]中设置price的值,并比较始终为if (out[0] < price)的{​​{1}}。这就是为什么你的第二个不工作。

因此,您需要删除代码false。您甚至可以使用price = out[0]代替两个if-else

if