Почему моя ценность продолжает возвращаться как «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 для сохранения изменений. Удачи.