Javascript 为什么我的两个数字相加不起作用？_Javascript_Html

Javascript 为什么我的两个数字相加不起作用？

javascript html

Javascript 为什么我的两个数字相加不起作用？,javascript,html,Javascript,Html,我设法用不同的方法解决了这个问题，但我仍然不明白为什么这个方法一开始就不起作用，我可能遗漏了一些东西： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> *{padding: 10

我设法用不同的方法解决了这个问题，但我仍然不明白为什么这个方法一开始就不起作用，我可能遗漏了一些东西：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml/DTD/xhtml1-transitional.dtd">

<html>

<head>
<style type="text/css">
*{padding: 10px}
</style>
</head>

<body>

<script type="text/javascript"> 

function adding(){
var addnum1=parseInt(num1);
var addnum2=parseInt(num2);
var result=addnum1 + addnum2;
sum.value=result;
}

</script>

<input type="text" name="num1"><br>
<input type="button" value="+" disabled="true"><br>
<input type="text" name="num2"><br>
<input type="button" value="=" onclick="adding()"><br>
<input type="text" name="sum">

</body>

</html>


*{填充：10px}
函数添加（）{
var addnum1=parseInt（num1）；
var addnum2=parseInt（num2）；
var结果=addnum1+addnum2；
求和值=结果；
}

num1

、

num2

和

sum

不会在javascript中声明。你可以给他们类似的身份证

<input type="text" id="num1">
<input type="text" id="num2">
<input type="text" id="sum">

虽然我看到人们直接将输入值作为全局变量来访问，但不建议这样做。我建议使用

getElementsByName

访问这些值

函数添加（）{
document.getElementsByName（“总和”）[0]。值=
parseFloat（document.getElementsByName（“num1”）[0].value）+
parseFloat（document.getElementsByName（“num2”）[0].value）；
}

这里是一个

jsfiddle

示例，您可以使用它来更好地学习

JavaScript:

function adding(){
  var num1 = document.getElementById('num1').value;
  var num2 = document.getElementById('num2').value;
  var addnum1=parseInt(num1);
  var addnum2=parseInt(num2);
  var result= addnum1 + addnum2;
  var sum = document.getElementById('sum');
  sum.value=result;
}

<input type="text" id="num1"><br>
<input type="button" value="+" disabled="true"><br>
<input type="text" id="num2"><br>
<input type="button" value="=" onclick="adding()"><br>
<input type="text" id="sum">

您的HTML:

function adding(){
  var num1 = document.getElementById('num1').value;
  var num2 = document.getElementById('num2').value;
  var addnum1=parseInt(num1);
  var addnum2=parseInt(num2);
  var result= addnum1 + addnum2;
  var sum = document.getElementById('sum');
  sum.value=result;
}

<input type="text" id="num1"><br>
<input type="button" value="+" disabled="true"><br>
<input type="text" id="num2"><br>
<input type="button" value="=" onclick="adding()"><br>
<input type="text" id="sum">

检索值并分配给文本框时需要注意的几点：

必须使用

getElementById

方法，并为元素分配

id

属性。

您还必须在JavaScript中检索该元素的值，否则将得到

NaN

。使用此

document.getElementById（'num2'）。值，而不是document.getElementById（'num2'）

调试帮助：尝试console.log
，它会将变量打印到浏览器控制台，从而帮助您确定错误所在。
如果您解释了这个问题，就容易多了，因为我们不必随机猜测它出了什么问题？您没有向方法传递任何参数，也没有在方法中声明num1或num2等于任何值。您的函数不知道num1、num2或sum是什么。您依赖的是一个不推荐使用的特性，name
属性不一定反映到全局变量。使用id
和getElementById
方法获取对HTML元素的引用。@IsabelHM感谢您的链接。感谢您的回答和链接。非常感谢。谢谢你的回答。您认为使用getElementsByName还是getElementById更好？或者这主要取决于我们如何处理我们正在访问的值？我只对将以表单形式提交的输入使用name
，否则，如果其中有多个，我将使用class
，如果其中只有一个，并且没有以表格形式提交，那么我将使用id
感谢您的回答。