为什么这个javascript代码没有输出?我错过了什么?
下面是我编写的一些示例代码,因为我有一个难以工作的任务,现在,我甚至无法使其工作。试图显示将两个数字相加的输出,我错过了什么?为什么这个javascript代码没有输出?我错过了什么?
<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
<script type="text/javascript">
function Add() {
var n1 = document.getElementById("numOne").value;
var n2 = document.getElementById("numTwo").value;
var total = n1 + n2;
document.getElementById("output").innerHTML = total;
}
</script>
</head>
<body>
<h1>Calc</h1><br />
<form method="post" action="">
NUM 1: <input type="number" name="numOne" id="numOne" /><br />
NUM 2: <input type="number" name="numTwo" id="numTwo" /><br />
<input type="button" value="Add" onclick="ADD()" /><br />
Result: <label id="output"></label>
</form>
</body>
</html>
您需要在引用它时匹配函数名称的大小写。 ADD()
应该是Add()
。请向您的开发人员控制台查询错误消息。
另外,如果你想总结这两个数字,你需要首先将它们从字符串转换为不连接。
function Add() {
var n1 = document.getElementById("numOne").value;
var n2 = document.getElementById("numTwo").value;
var total = parseInt(n1, 10) + parseInt(n2, 10);
document.getElementById("output").innerHTML = total;
}
在这里,我用parseInt()
与10
基数的数字字符串转换为数字。
ADD()
=>变化到Add()
(JavaScript是区分大小写)
函数字符串转换为数字。完美运行,运行并看看。 (如果你不把这个,和你的输入,说,5
和6
,那么你的输出就会56
(字符串连接),而不是11
)
<head>
<title>Sample</title>
<script type="text/javascript">
function Add() {
var n1 = document.getElementById("numOne").value;
var n2 = document.getElementById("numTwo").value;
var total = Number(n1) + Number(n2); // Number() function
document.getElementById("output").innerHTML = total;
}
</script>
</head>
<body>
<h1>Calc</h1><br />
<form method="post" action="">
NUM 1: <input type="number" name="numOne" id="numOne" /><br />
NUM 2: <input type="number" name="numTwo" id="numTwo" /><br />
<input type="button" value="Add" onclick="Add()" /><br />
Result: <label id="output"></label>
</form>
</body>
谢谢你,现在输出显示。但我的任务仍然没有工作。第2轮? –
对不起,我没有得到你。第2轮?!!尝试添加'html'标签和'',如果您正在使用PC而不是像jsfiddle这样的地方。 – Miraj50
函数名是区分大小写的,则需要更改此:
<input type="button" value="Add" onclick="ADD()" /><br />
要这样:
<input type="button" value="Add" onclick="Add()" /><br />
'ADD()'!='Add()'。你应该学习一些基本的调试技巧,比如使用浏览器的开发工具,尤其是控制台。它会立即向你显示这样的事情。您还将两个字符串连接在一起,因此您应该在输出结果之前将它们转换为数字。 – j08691
'onclick =“Add()”'? – PredatorIWD
“这个问题是由于无法再现的问题或简单的印刷错误造成的。” - 投票结束,作为题外话题。 – Quentin