爲什麼我的價值繼續作爲「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保存我的更改。祝你好運。