javascript - 如何更改 DOM 元素的样式

Question

有一个简单的 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)

这个想法是用红色或绿色标记价格，以防价格下跌或上涨。直到现在它只适用于上升（如果永远不起作用，则为第二个）。我做错了什么，我该如何纠正？;)

标签： javascript

Answer 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);