将 HTML 元素转换为返回 NaN Javascript 的 Int答案

【问题标题】：Converting HTML element to Int returning NaN Javascript将 HTML 元素转换为返回 NaN Javascript 的 Int
【发布时间】：2016-02-15 21:18:33
【问题描述】：

我正在尝试制作玩家生命值计数器，但我仍然返回 NaN.. 帮助

这是我的 HTML

<!--player 1 hp-->
<div class="row">
    <div class="col-sm-6 col-md-6 col-xs-12 col-lg-6">
        <h2 class="text-center" id="play1HP">0</h2>
        <button onclick="healthCountUp1()">+1</button>
    </div>

还有我的 JavaScript

function healthCountUp1(){
    var player1HP = parseInt(document.getElementById("play1HP").value);
    var add = player1HP + 1;
    document.getElementById("play1HP").innerHTML = player1HP;
}

【问题讨论】：

标签： javascript html counter nan parseint

【解决方案1】：

h2 元素没有value 属性，所以parseInt 将返回NaN。您需要使用innerHTML 或textContent 来获得价值。您还需要使用变量add 进行更新。

function healthCountUp1() {
  var player1HP = parseInt(document.getElementById("play1HP").innerHTML);
  var add = player1HP + 1;
  document.getElementById("play1HP").innerHTML = add;
}

<div class="col-sm-6 col-md-6 col-xs-12 col-lg-6">
  <h2 class="text-center" id="play1HP">0</h2>
  <button onclick="healthCountUp1()">+1</button>
</div>

function healthCountUp1() {
  var player1HP = parseInt(document.getElementById("play1HP").textContent);
  var add = player1HP + 1;
  document.getElementById("play1HP").textContent = add;
}

<div class="col-sm-6 col-md-6 col-xs-12 col-lg-6">
  <h2 class="text-center" id="play1HP">0</h2>
  <button onclick="healthCountUp1()">+1</button>
</div>

【讨论】：

【解决方案2】：

您需要innerHTML 而不是value。这是因为h2 元素没有名为value 的属性。因此，当您读取h2 的value 时，您会得到undefined，当您将undefined 传递给parseInt 时，您会得到NaN。

 var player1HP = parseInt(document.getElementById("play1HP").innerHTML);

【讨论】：

【解决方案3】：

你最好制作变量来存储健康值：

<div class="row">
    <div class="col-sm-6 col-md-6 col-xs-12 col-lg-6">
        <h2 class="text-center" id="play1HP">0</h2>
        <button onclick="healthCountUp1()">+1</button>
    </div>

javascript：

var health = 0;
function healthCountUp1(){
    health++;
    document.getElementById("play1HP").innerHTML = health;
}

【讨论】：