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

时间:2015-05-09 14:15:33

标签: javascript html twitter-bootstrap local-storage

Here是jsbin的链接。

我差不多完成了我的项目(我以为我是),然后我测试了它。它应该添加具有所选任务标题和奖励点数的按钮。每次点击按钮时,点数将被添加到“点数”部分,每500点我的“等级”将增加。

完成后,它起作用了。然后我去清除localStorage,因为那是我用来保存信息的,但我想重新开始。当我这样做时,'Points'部分或'results'值继续作为“NaN”返回。代码与工作时的代码完全相同。有人可以告诉我如何解决这个问题,提前谢谢。

这是代码。 (用于CSS的bootstrap)

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);


}

1 个答案:

答案 0 :(得分:1)

您正在将theListView.setOnItemClickListener(new AdapterView.OnItemClickListener() { public override void onItemClick(AdapterView<?> adapterView, View view, int position, long id) { String tvShowPicked = "You selected " + favoriteTVShows[position]; Toast.makeText(MainActivity.this, tvShowPicked, Toast.LENGTH_SHORT).show(); } }); 解析为数字,但其值最初实际上是result.innerText或者没有,两者最终都是NaN。一个解决方法是检查它是否解析为一个数字,如果它没有,则回退到NaN

我刚刚改变了这一点并删除了一些0 s,在我看来,这是多余的,请检查getElementById函数:

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

addToResult

我最终使用了jsFiddle,因为我无法始终获得jsBin来保存我的更改。祝你好运。