For 循环未显示网站中的所有类

Question

我正在尝试做一些事情来总结我在英雄联盟中花费的所有时间。我想获得所有在官方 LoL 比赛历史上存储分钟的课程。现在我正在做这样的事情：var time = document.querySelectorAll('.date-duration-duration');var timeArr = Array.from(time);for(var i = 0; i < timeArr.length; i++){    timeArr[i].innerText;}它只给我来自 Array 的第一个元素的innerText。但是当我的 for 循环只有 timeArr 而不是 timeArr[i].innerText 时，它显示了所有选定的元素，但没有innerText。我应该怎么做才能列出这个数组中的每个innerText，因为我想要做的下一步是解析所有这些元素并将它们相加。有人可以指导我吗？:)我想补充一点，我现在非常初学者，我刚刚开始使用 JavaScript。截图

Answer 1

Array.from应该管用。确保您实际上正在抓取包含文本的元素。

您可以查询.date-duration-duration > div或简单地查询.date-duration-duration。

// You can use either Array.from or [].slice.call

var times = Array.from(document.querySelectorAll('span.date-duration-duration > div'))

  .map(duration => duration.textContent); // innerHTML will return markup

  

console.log(times.join(', '));

<span class="date-duration-duration"><div>00:00</div></span>

<span class="date-duration-duration"><div>06:00</div></span>

<span class="date-duration-duration"><div>12:00</div></span>

<span class="date-duration-duration"><div>18:00</div></span>

Answer 2

您应该将结果存储在某个地方。在您的示例中，您只需在元素上调用属性 innerText，无需任何分配。例如，您可以这样做：

var time = document.querySelectorAll('.date-duration-duration');

var timeArr = Array.from(time);

var result = [];

for(var i = 0; i < timeArr.length; i++){

  result.push(timeArr[i].innerText);

}

变量result将包含您的值作为字符串。然后你可以总结一下

result.reduce((sum, value) => sum + parseInt(value), 0);

Answer 3

使用 console.log

var time = document.querySelectorAll('.date-duration-duration');

var timeArr = Array.from(time);

for(var i = 0; i < timeArr.length; i++){

    console.log(timeArr[i].innerText);

}

默认情况下，它只记录最后一个数据，以防 timeArr 它是一个包含 15 个元素的数据。