提取类

Question

我正在寻找一种方法将变量z设置为500

到目前为止，我尝试了以下内容：

z = +(document.getElementsByClassName("time span").innerHTML)

但是它给了我NaN的输出

Answer 1

您可以改为使用querySelector()并选择.time span

＆＃13;

＆＃13;

var z = document.querySelector('.time span').innerHTML;
console.log(z)

＆＃13;

<div class="time">Time: <span>500</span></div>

＆＃13;

＆＃13;

＆＃13;

如果您想将多个span的时间添加到z var，可以使用querySelectorAll()返回 NodeList 并将其转换为数组，然后使用forEach循环并将span的每个值添加到z

＆＃13;

＆＃13;

var z = 0;

Array.from(document.querySelectorAll('.time span')).forEach(function(e) {
  z += Number(e.innerHTML);
});
console.log(z)

＆＃13;

<div class="time">Time: <span>500</span>
</div>
<div class="time">Time: <span>200</span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

问题是你有一个NodeList元素 - 即使它只是一个元素的NodeList - 你正试图从中检索innerHTML属性;这不行。

此外，您在检索<span>的节点中有一个innerHTML;将在字符串中返回，给出（大约）：

<span>500</span>

不会将其解析为数字;所以改为使用索引从单个节点检索属性，并使用textContent检索文本而不是HTML：

z = document.getElementsByClassName("time")[0].textContent;

var z = document.getElementsByClassName('time')[0].textContent;
console.log(z)

<div class="time">Time: <span>500</span></div>

或只检索单个节点：

z = document.querySelector(".time").textContent;

var z = document.querySelector('.time').textContent;
console.log(z)

<div class="time">Time: <span>500</span></div>