Question

我的js代码存在一些问题，当我运行该代码时，它向我显示NaN错误，我有一个计算内容的函数。

示例：

<p id = "total "></p>
total = num1 *num2; 
document.getElementById("total").innerHTML = total;

它工作正常，但是当我创建一个新函数来计算折扣时

var price = document.getElementById("total").value;

discount = total *0.10;

它显示了NaN，我尝试了很多解决方案，但仍然无法正常工作。

你能帮我吗？

Answer 1

当您拉取值时，它是一个字符串，JavaScript在大多数情况下会自动进行类型转换，但您始终可以将其包装在parseInt中以强制将其转换为数字。

discount = parseInt(total) * 0.10;

您还可以始终运行typeof total来验证total是数字还是字符串，并且可以运行console.log(total)来直观地验证内容。

此外，您的document.getElementById("total")引用了一个paragraph属性，该元素没有.value属性，因此您应该使用innerText来获取其值。

演示

var button1 = document.getElementById('button1');
var button2 = document.getElementById('button2');

button1.addEventListener('click', function() {
  var num1 = document.getElementById('num1').value;
  var num2 = document.getElementById('num2').value;
  
  
  total = parseInt(num1) * parseInt(num2); 
  document.getElementById("total").innerText = total;
});

button2.addEventListener('click', function() {
  var total = document.getElementById("total").innerText;
  
  discount = parseInt(total) * 0.10;
  document.getElementById('discount').innerText = discount;
});

<input type="text" id="num1" /><br>
<input type="text" id="num2" /><br>
<button id="button1">Add</button>
<p id="total"></p>

<button id="button2">Discount</button>
<p id="discount"></p>

文档

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN

Answer 2

您的代码中几乎没有问题：

没有 p 元素的value属性。要访问 p 元素中的文本，可以使用 textContent 或 innerText 。
默认情况下，文本的类型为字符串。将字符串与数字相乘得到 NaN 。在执行任何算术运算之前，您必须将其转换为数字。

var num1 = 5;
var num2 = 20;
var total = num1 *num2; 
document.getElementById("total").textContent = total;

var elTotal = Number(document.getElementById("total").textContent);

var discount = elTotal * 0.10;
console.log(discount)

<p id = "total"></p>

Answer 3

我认为您有一个概念错误，如果该值是HTML值，则是在

内部

<p id="this_is_the_element">123456789</p>

您可以使用

使用javascript获取该值

var number = document.getElementById('this_is_the_element').innerHTML

现在数字变量将在“ 123456789”内作为STRING

但是，如果您使用输入，则应使用

var number = document.getElementById('this_is_the_element').value

现在，尝试一下。首先尝试避免parseInt，而使用Number。

定义一个函数

var discount = function(){
   var price = Number(document.getElementById("total").innerHTML);
   return price*0.1;
}

如果您想在新的sintax上使用它，请使用此

const discount = () => {
   const price = Number(document.getElementById("total").value);
   return price*0.1;
}

JS中的Nan Prolem

3 个答案:

演示

文档