Question

我设法用另一种方法解决了这个问题，但我仍然不明白为什么这种方法最初没有工作，我可能遗漏了一些东西：

<!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>

Answer 1

以下是您可以用来更好地学习的jsfiddle示例。

https://jsfiddle.net/pxpmp45v/2/

<强> 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;
}

您的HTML：

<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属性。 <input type="text" id="num1"> 您还必须在JavaScript中检索该元素的值，否则您将获得NaN。使用此document.getElementById('num2').value代替document.getElementById('num2')

调试帮助：尝试console.log将变量打印到浏览器控制台，从而帮助您识别错误。

Answer 2

您的javascript中未声明

num1，num2和sum。你可以给他们像

这样的ID

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

然后使用document.getElementById()

访问它们

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

Answer 3

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

＆＃13;

function adding(){
  document.getElementsByName("sum")[0].value =
  parseFloat(document.getElementsByName("num1")[0].value) +
  parseFloat(document.getElementsByName("num2")[0].value); 
}

＆＃13;

<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">

＆＃13;

为什么我添加两个数字不起作用？

3 个答案: