Question

我会以对不起的方式作为序言，我是一个完整的菜鸟，我只是不明白发生了什么。

我正在添加两个类型为数字的变量（我检查过），当我打印结果时，我得到了NaN。：（

更多上下文：我想在我的页面上添加一个现有的数字（3，在这里的HTML中），实时显示用户输入的内容。我可以很好地检索这些数字，当我检查它们的类型时，它返回“数字”。但是当我为他们的总和分配一个变量时，我得到了NaN。我觉得我错过了一些愚蠢的东西。

javascript：

window.onload = setupHandlers;

function getBanana() {
console.log("hi getBAnana is running")
var quantity = document.getElementById("Banana");
var howmany = 0;
if(quantity.value!="") {
  howmany = parseInt(quantity.value);
}

console.log(howmany);
var total = document.getElementById("total").innerHTML;
console.log(total);
oldtotal = parseInt(total.value);
console.log("oldtotal type: " + typeof oldtotal);
console.log("howmany: " + howmany);
console.log("howmany type: " + typeof howmany);
newtotal = oldtotal + howmany;

console.log("newtotal type: " + typeof newtotal);
console.log(newtotal);
}

function setupHandlers(){
   var Banana = document.getElementById("Banana");
   Banana.onchange = getBanana;
}

The HTML:
 <!-- some form code and other tags here blabla-->
    <input type="number" id="Banana" min="0" placeholder="lbs">
    <span id= "total">3</span>
    <script src="jstest.js" type="text/javascript"></script>

非常感谢任何帮助。

Answer 1

total是一个字符串。字符串没有.value，因此total.value为undefined。 parseInt(undefined)是NaN，即使它不是数字（JavaScript充满旧疣），也是number。当您添加NaN和任何其他号码时，您仍会获得NaN。

您需要parseInt(total)。

此外，由于3不是HTML，因此最好使用.textContent而不是.innerHTML。

Javascript：添加数字类型让我NaN

1 个答案: