使用Javascript添加innerHTML答案

【问题标题】：Adding innerHTML using Javascript使用Javascript添加innerHTML
【发布时间】：2020-10-03 07:58:45
【问题描述】：

<div id="ones">
 <span class="dice">&#9856;</span>
 <p>-</p>
 </div>

我正在 id=ones 内访问此 p 标记。通过这个 Javascript 行。

var valueCount = 0;
    var valueCount = document.getElementById('ones').getElementsByTagName('p').textContent;
    valueCount++;
    document.getElementById('ones').getElementsByTagName('p').textContent = valueCount;

在控制台上，我得到 NaN。我哪里做错了？？？

【问题讨论】：

Get Elements By Tag Name。元素。您将获得一个数组中的所有 P 标签，即使它只有一个。

标签： javascript html dom innerhtml

【解决方案1】：

而不是使用document.getElementById 来访问没有任何id 或class 属性的p 标记。您可以使用document.querySelector，但需要在段落中使用可以转换为数字的数字使用例如 parseInt

const valueP = document.querySelector('#ones p');
var valueCount = parseInt(valueP.textContent);
valueCount++;
valueP.textContent = valueCount;

<div id="ones">
  <span class="dice">&#9856;</span>
  <p>0</p>
</div>

【讨论】：

我只是在编辑我的答案。你之前已经完成了。非常感谢。
这也为 valueCount 提供了 NaN 值。 HTML 文件无法编辑，它将与 <p>-</p> 相同。它应该在不更改 HTML 的情况下完成。这个答案和我的一样。

【解决方案2】：

在您提供的代码中，我们可以看到您将 valueCount 定义为 0，然后我们从 p 标签中获取文本数据并将此值分配给 valueCount 所以现在在 valueCount 我们有'-'字符串，然后我们尝试增加这个不正确的值，所以现在valueCount 是 NaN，这就是问题所在

var valueCount = 0;
var valueCount = document.getElementById('ones').getElementsByTagName('p').textContent;
valueCount++;
document.getElementById('ones').getElementsByTagName('p').textContent = valueCount;

【讨论】：

document.querySelector("#ones p") 要短得多。
是的，在getElementsByTagName('p').textContent textContent 中也是未定义的，因为getElementsByTagName('p') 返回数组，所以是的，querySelector 在这种情况下更好，您将从元素数组中获取第一个元素匹配到选择器