为什么我的值一直返回 "NaN"？

Question

Here 是 jsbin 的 link。

我几乎完成了我的项目（我以为我已经完成了），然后我对其进行了测试。它应该添加带有所选任务标题和奖励点数的按钮。每次单击按钮时，点数都会添加到 "Points" 部分，每 500 点我的 "Level" 就会增加。

完成后，它起作用了。然后我去清除 localStorage，因为那是我用来保存信息的，但我想重新开始。当我这样做时，'Points' 部分或 'results' 值一直返回为 "NaN"。该代码与运行时完全相同。谁能告诉我如何解决这个问题，提前谢谢你。

这是代码。（将 bootstrap 用于 CSS）

HTML

<center>

  <br>
   <h2> Add task </h2>

  <div class='well' style='width:500px' id="addc"> 
    <div id="addc">
    <input class='form-control' style='width:450px' id="btnName" type="text" placeholder="New Task" /><br>
    <input class='form-control' style='width:450px' id="btnPoints" type="text" placeholder="Points" /><br>

      <button id="addBtn">Add</button>

      </div> </div>

<div class='well' style='width:230px' id="container">

</div>

  <hr style="width:400px;">

  <h3>Points </h3>
<div id="result">0</div>

</div>



<hr style="width:400px;">

<div  style="width:400px;">
  <h3>Level 
  <p id='lvl'>0</p>

</div>

<hr style="width:400px;">


</center>

JavaScript

var res = document.getElementById('result');
res.innerText = localStorage.getItem('myResult');

var level = document.getElementById('lvl');
level.textContent = localStorage.getItem('myLevel');


var btns = document.querySelectorAll('.btn');
for(var i = 0; i < btns.length; i++) {
    btns[i].addEventListener('click', function() {
        addToResult(this.getAttribute('data-points'));
        this.parentNode.removeChild(this.nextElementSibling);
        this.parentNode.removeChild(this);
    });
}
var addBtn = document.getElementById('addBtn');
addBtn.className = "btn btn-default";
addBtn.addEventListener('click', function() {
    var container = document.getElementById('container');
    var btnName = document.getElementById('btnName').value;
    var btnPoints = parseInt(document.getElementById('btnPoints').value);
    if(!btnName)
        btnName = "Button ?";
    if(!btnPoints)
        btnPoints = 50;
    var newBtn = document.createElement('button');
    var newPnt = document.createElement('span');
    newBtn.className = 'btn btn-danger';
    newBtn.innerText = btnName;
    newBtn.setAttribute('data-points', btnPoints);
    newBtn.addEventListener('click', function() {
        addToResult(this.getAttribute('data-points'));
        this.parentNode.removeChild(this.nextElementSibling);
        this.parentNode.removeChild(this);
    });
    newPnt.className = 'label';
    newPnt.innerText = "+" + btnPoints;
    container.appendChild(newBtn);
    container.appendChild(newPnt);
});




function addToResult(pts) {
    var result = document.getElementById('result');
    result.innerText = parseInt(result.innerText) + parseInt(pts);
    var lvl = 0;
    var a = 100;

    while (result.innerText > 5*a) {
      lvl+=1;
      a+=100;
    }
  document.getElementById('lvl').innerText = lvl;

   var res = document.getElementById('result');
  localStorage.setItem("myResult", res.innerText);

  var level = document.getElementById('lvl');
  localStorage.setItem("myLevel", level.textContent);


}

Answer 1

您将 result.innerText 解析为一个数字，但它的值最初实际上是 NaN 或什么都不是，两者最终都是 NaN。一种解决方法是只检查它是否解析为数字，如果没有解析为数字，则回退到 0.

我只是基本上改变了它并删除了一些在我看来是多余的 getElementByIds，检查 addToResult 函数：

http://jsfiddle.net/owc26a0p/1/

function addToResult(pts) {
    // NaN is falsy, so you can just use || to make a fallback to 0
    var result = parseInt(resDiv.innerText, 10) || 0,
        lvl = 0,
        a = 100;
    result = result + parseInt(pts, 10) || 0;
    while (result > 5 * a) {
        lvl += 1;
        a += 100;
    }
    resDiv.innerText = result;
    levelDiv.innerText = lvl;
    localStorage.setItem("myResult", result);
    localStorage.setItem("myLevel", levelDiv.textContent);

}

我最终使用了 jsFiddle，因为我不能总是让 jsBin 保存我的更改。祝你好运。

为什么我的值一直返回 "NaN"？

Why does my value keep returning as "NaN"?

html

javascript

local-storage

twitter-bootstrap