Question

这个应该计算指数增长的简单javascript / html组合对我来说不起作用我提交时会返回NaN

这是代码：

<html>
<head>
<script>
function Start() {
var GetA = document.getElementById("A").value;
var GetB = document.getElementById("B").value;
var GetX = document.getElementById("X").value;
var ParseA = parseInt(GetA);
var ParseB = parseInt(GetB);
var ParseX = parseInt(GetX);
var Num1 = ParseB + 100;
var Num2 = Num1 * .01;
var Num3 = Math.pow(Num2, ParseA);
var Num4 = Num3 * ParseA;
document.getElementById("Answer").innerHTML = Num4;
}
</script>
</head>
<body>
<input id="A" placeholder="Starting Number">
<br />
<input id="B" placeholder="Rate">
<br />
<input id="X" placeholder="Time">
<br />
<input type="button" id="Submit" value="Submit" onclick="Start()">
<p id="Answer"></p>
</body>
</html>

Answer 1

var Num3 = Num2 ^ ParseA;

^是bitwise xor operator。您可能希望改为使用Math.pow(Num2, ParseA)。

我提交时会返回NaN

提交时只执行Start功能。但是，Parse[ABX]变量会在文档加载时初始化 - 并且其值为undefined，这会导致计算中出现NaN。

移动您从函数输入中获取值的部分。

Answer 2

NaN ¹的问题是代码试图在之前访问DOM元素将它们添加到DOM并且变量结束了垃圾值。

这实际上导致异常 - 因为getElementById(..)返回null并且null.value无效 - 并且脚本执行被中止。错误控制台将包含类似于“TypeError：无法读取属性'值'的消息”。由于功能声明的“提升”，仍然定义了启动功能。

由于此错误，ParseA / B / X值为undefined。这会导致某些数学运算，例如undefined + number（如ParseB + 100中）返回NaN。涉及引入的NaN的每个后续数学运算（例如Num1 * .01）都会传播NaN。

相反，等待访问值，直到Start：元素存在之后（这样就没有异常）并且输入了有效值（这样parseInt本身不会返回NaN）。

如果以下代码仍然导致“NaN”输出，则在NaN行之一中引入了parseInt。

function Start() { var GetA = document.getElementById("A").value; var ParseA = parseInt(GetA, 10); var GetB = document.getElementById("B").value; var ParseB = parseInt(GetB, 10); var GetX = document.getElementById("X").value; var ParseX = parseInt(GetX, 10); var Num1 = ParseB + 100; var Num2 = Num1 * .01; var Num3 = Num2 ^ ParseA; var Num4 = Num3 * ParseA; document.getElementById("Answer").innerHTML = Num4; }

请注意，我还指定了基数（10），这是parseInt的好习惯。

¹ ^的错误用法是一个问题，正如Bergi的回答中所讨论的那样，会导致错误答案，但不会导致NaN，除非它从其他地方传播

指数增长计算器？

2 个答案: