Question

我的HTML“sum.html”文件似乎无法使用我的“mathbox.js”文件。我已经在HTML头中声明了它，但是，在Chrome控制台中检查时，num1和num2似乎与sum一起使用sum = num1 + num2。

这是我的Javascript功能;

var num1 = Number(num1);
var num1 = Number(num1);
function calSum(){

    var num1 = document.getElementById("num1").innerHTML;
    var num2 = document.getElementById("num2").innerHTML;
    var add = num1 + num2;
    document.getElementById("sum").inneHTML = add;
}

以下是我的HTML

<!DOCTYPE HTML PUBLIC>

<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Matchbox</title>
<script type ="text/javascript" src="mathbox.js"></script>
</head>
<body>

<div>




<table border="1">
<tr>
<td style="text-align:right">First number:</td>
<td>
   <input type="text" id = "num1" />
</td>
<td rowspan="2">
   <input type="button" value="Calculate" onclick="calSum()">
</td>
</tr>

<tr>
<td style="text-align:right">Second number:</td>
<td>
   <input type="text" id ="num2" />
</td>
</tr>
</table>

<br>
<table border="1">
<tr>
<td style="text-align:right">Sum:</td>
<td style="width:100px"> <input type="text" id ="sum" onclick="cal" /></td>
</tr>
</table>

</div>
</body></html>

Answer 1

var num1 = Number(num1);  //called only once and it will suffer error

您无法将其解析为全局变量，因为每次您必须将字符串值解析为number并获取文本框的值使用 {{1} } 属性。

value

Answer 2

您不能将 .innerHTML 用于输入类型文字

使用如下：

document.getElementById("sum").value = add;

将YOur功能替换如下：

function calSum(){

    var num1 = document.getElementById("num1").value;
    var num2 = document.getElementById("num2").value;
    var add = parseFloat(num1) + parseFloat(num2);

    //or you can use  var add =  Number(num1) + Number(num2);
    document.getElementById("sum").value= add;
}

Answer 3

document.getElementById("num1")返回一个字符串。在使用Number()添加之前，您需要将其转换为数字。否则它将进行字符串连接。此外，您还必须使用.innerHTML而不是.value。

function calSum(){

    var num1 = document.getElementById("num1").innerHTML;
    var num2 = document.getElementById("num2").innerHTML;
    var add = Number(num1) + Number(num2);
    document.getElementById("sum").value = add;
}

Answer 4

<input type="text" id ="sum" onclick="cal" />

input元素没有innerHTML属性。您必须在Javascript中使用value属性。

就像这样...

document.getElementById("sum").value = add;

Answer 5

使用此

function calSum(){
    var num1 = document.getElementById("num1").value;
    var num2 = document.getElementById("num2").value;
    var add =  Number(num1) + Number(num2);
    document.getElementById("sum").value = add;
}

在您的代码中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">

function calSum(){
    alert('sasa');
    var num1 = document.getElementById("num1").value;
    var num2 = document.getElementById("num2").value;
    var add =  Number(num1) + Number(num2);
    document.getElementById("sum").value = add;
}
</script>
<title>Untitled Document</title>
</head>
<body>

<table border="1">
<tr>
<td style="text-align:right">First number:</td>
<td>
   <input type="text" id="num1" />
</td>
<td rowspan="2">
   <input type="button" value="Calculate" onclick="calSum()">
</td>
</tr>

<tr>
<td style="text-align:right">Second number:</td>
<td>
   <input type="text" id="num2" />
</td>
</tr>
</table>
<br>
<table border="1">
<tr>
<td style="text-align:right">Sum:</td>
<td style="width:100px"> <input type="text" id ="sum" onclick="cal" /></td>
</tr>
</table>
</body>
</html>

Answer 6

对于输入框，我们使用的值不是innerHTML，innerHTML用于div，td等容器。

所以请改变你的功能

function calSum(){
   var num1 = +document.getElementById("num1").value;
   var num2 = +document.getElementById("num2").value;
   var add = num1 + num2;
    document.getElementById("sum").value= add;
}

Answer 7

将您的功能更改为：

function calSum()
{
    var num1 = document.getElementById("num1").value;   
    var num2 = document.getElementById("num2").value;   

    if(!isNaN(num1) && !isNaN(num2))
    {
        add = parseFloat(num1) + parseFloat(num2);
    }   

    document.getElementById("sum").value = add;     
}

使用innerHTML标记在HTML中调用Javascript函数

7 个答案: