javascript - 我的代码 Javascript 有什么问题？我在警报窗口中收到的消息是 NaN

Question

这段代码只是不想工作。我在警报窗口中收到的消息是 NaN

<script type="text/javascript">
var number1 = document.numbers.nr1.value
var number2 = document.numbers.nr2.value

function add(){
var total = number1 + number2;
return total;

     }

</script>


<form action="" name="numbers">
<input type="text" name="nr1"  />
<input type="text" name="nr2" />
<input type="submit" onclick="alert(add())" />
</form>

Answer 1

您必须在函数中获取数字。否则，它会尝试在将任何内容输入文本字段之前（甚至在加载文本字段之前）获取值，这当然没有定义。

function add(){
    var number1 = parseFloat(document.numbers.nr1.value);
    var number2 = parseFloat(document.numbers.nr2.value);
    var total = number1 + number2;
    return total;
}

Answer 2

您必须使用parseInt()或parseFloat()然后只有字符串会被转换为整数，因为默认情况下文本框值是字符串..
您的 javascript 代码应该是这样的..

var number1 = parseInt(document.numbers.nr1.value)
var number2 = parseInt(document.numbers.nr2.value)

函数 add(){
var 总数 = number1 + number2;
返回总计；

 }

或

var number1 = parseFloat(document.numbers.nr1.value)
var number2 = parseFloat(document.numbers.nr2.value)

函数 add(){
var 总数 = number1 + number2;
返回总计；

 } 

Answer 3

当您此时调用 add 函数时，不会计算该值。因为这两个语句都存在于函数之外。请记住在页面加载期间 DOM 从上到下解析。在页面加载时，DOM 遇到了这两个语句并看到它们是undefined. 所以你需要将它们都移动到函数中。您获得的值是 a 的形式，string因此您需要解析它们，否则string concatenation会发生。

找到下面的工作代码：

function add(){
var number1 = parseInt(document.numbers.nr1.value, 10);
var number2 = parseInt(document.numbers.nr2.value, 10);

var total = number1 + number2;
return total;

     }

</script>


<form action="" name="numbers">
<input type="text" name="nr1"  />
<input type="text" name="nr2" />
<input type="submit" onclick="alert(add())" />
</form>  

希望这可以帮助

Answer 4

如果您只需要警报，只需查看下面的代码，

<script type="text/javascript">
function add(){ //function to add
var number1 = document.numbers.nr1.value 
var number2 = document.numbers.nr2.value
var total = number1 + number2; //total
alert(total); //alert total
}
</script>


<form action="" name="numbers">
<input type="text" name="nr1"  />
<input type="text" name="nr2" />
<input type="submit" onclick="add()" /> <!--onclick with submit button-->
</form>

Answer 5

    <script type="text/javascript">
function add(){
var number1 = parseInt(document.getElementById("nr1").value);
var number2 = parseInt(document.getElementById("nr2").value);


var total = number1 + number2;
return total;

     }

</script>


<form action="" name="numbers">
<input type="text" name="nr1"  id="nr1" />
<input type="text" name="nr2"  id="nr2"/>
<input type="submit" onclick="alert(add())" />
</form>