为什么我的价值继续作为“NaN”返回？

Question

Here是jsbin的链接。

我几乎完成了我的项目（我以为我是），然后测试了一下。它应该添加带有所选任务标题的按钮以及它授予的点数。每次点击按钮时，点将被添加到“点”部分，每500点我的“级别”会增加。

一旦完成它，它的工作。然后我去清除localStorage，因为这是我用来保存信息的地方，但我想重新开始。当我这样做时，“点数”部分或“结果”值会一直返回为“NaN”。该代码与其工作时的代码完全相同。有人可以告诉我如何解决这个问题，提前谢谢。

这是代码。 （对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。

我基本上只是改变了这一切，并删除了一些getElementById s表示，在我看来，是多余的，检查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保存我的更改。祝你好运。