Question

我的问题是收到“ TypeError：无法在updatePrice处将属性'innerText'设置为null”错误。我想知道我的问题是否出在选择器数组中？如果可以，是否有办法实现我想要达到的目标？

var currency = "CAD";
var coins = [document.querySelector("#btc"),
            document.querySelector("#eth"),
            document.querySelector("#eos"),
            document.querySelector("#lite")];
var urls = ["https://min-api.cryptocompare.com/data/price?fsym=BTC&tsyms=CAD",
            "https://min-api.cryptocompare.com/data/price?fsym=ETH&tsyms=CAD",
            "https://min-api.cryptocompare.com/data/price?fsym=EOS&tsyms=CAD",
            "https://min-api.cryptocompare.com/data/price?fsym=LITE&tsyms=CAD"];

window.onload = function loadPrices() {
  setInterval(function() {
      for(var i = 0; i < 4; i++){
        fetch(urls[i])
        .then(handleErrors)
        .then(parseJSON)
        .then(updatePrice, i)
        .catch(displayErrors);
      }
}, 5000);
}

function parseJSON(res) {
  return res.json().then(function(parsedData){
    console.log(parsedData[currency]);
    return parsedData[currency];
  })
}
function updatePrice(data, i){
    console.log(coins[i]);
    coins[i].innerText = data;
 }
function handleErrors(res){
  if(!res.ok){
    throw Error(res.status);
  }
  return res;
}
function displayErrors(err){
    console.log(err);
}

我从这段代码中得到的输出是这样的，因此它肯定会正确地循环URL并检索价格，只是没有将它们放入HTML的正确位置。而且问题不在HTML内，因为如果我摆脱了数组，我可以使它与第一个响应一起使用。

9138.95
undefined
TypeError: Cannot set property 'innerText' of null
    at updatePrice (btc.js:30)
724.17
undefined
TypeError: Cannot set property 'innerText' of null
    at updatePrice (btc.js:30)
14.19
undefined
TypeError: Cannot set property 'innerText' of null
    at updatePrice (btc.js:30)
0.001736
undefined
TypeError: Cannot set property 'innerText' of null
    at updatePrice (btc.js:30)

Answer 1

在获取标签之前，标签必须存在

var coins;
window.onload = function loadPrices() {
  coins = [document.querySelector("#btc"),
           document.querySelector("#eth"),
           document.querySelector("#eos"),
           document.querySelector("#lite")];

Answer 2

您应该在for循环和here's why中使用let而不是var。

此外，您的updatePrice函数未正确传递i变量，因此coins[i]未定义。足够简单的解决方法是传入一个调用另一个函数的函数。所以改变：

.then(updatePrice, i)

到

.then((data)=>updatePrice(data, i))

回顾Promise#then函数的工作方式也可能很有用。

var currency = "CAD";
var coins = [document.querySelector("#btc"),
            document.querySelector("#eth"),
            document.querySelector("#eos"),
            document.querySelector("#lite")];
var urls = ["https://min-api.cryptocompare.com/data/price?fsym=BTC&tsyms=CAD",
            "https://min-api.cryptocompare.com/data/price?fsym=ETH&tsyms=CAD",
            "https://min-api.cryptocompare.com/data/price?fsym=EOS&tsyms=CAD",
            "https://min-api.cryptocompare.com/data/price?fsym=LITE&tsyms=CAD"];

window.onload = function loadPrices() {
  setInterval(function() {
      for(let i = 0; i < 4; i++){
        fetch(urls[i])
        .then(handleErrors)
        .then(parseJSON)
        .then((data)=>updatePrice(data, i))
        .catch(displayErrors);
      }
}, 5000);
}

function parseJSON(res) {
  return res.json().then(function(parsedData){
    console.log(parsedData[currency]);
    return parsedData[currency];
  })
}
function updatePrice(data, i){
    console.log(coins[i]);
    coins[i].innerHTML = data;
 }
function handleErrors(res){
  if(!res.ok){
    throw Error(res.status);
  }
  return res;
}
function displayErrors(err){
    console.log(err);
}

<div id="btc"></div>
<div id="eth"></div>
<div id="eos"></div>
<div id="lite"></div>

您可以在数组中使用document.querySelector（“ abc”）吗？

2 个答案: