<form>
<table>
<tr>
<td>Distance:</td>
<td><input type="number" id="distance" onKeyUp="calculate();">m</td>
</tr>
<tr>
<td>Time:</td>
<td><input type="number" id="time" onKeyUp="calculate();">s</td>
</tr>
<tr>
<td>Speed:</td>
<td><span id="speed">21</span><span id="unit"> m/s</span></td>
</tr>
</table>
</form>
<script type="text/javascript">
var calculate = function() {
var distance = document.getElementById("distance").value;
var time = document.getElementById("time").value;
var speed = distance/time;}
if (speed=="Infinity" || speed=="NaN") {
document.getElementById("speed").innerHTML="Invalid Input";
document.getElementById("unit").innerHTML="";
} else {
document.getElementById("speed").innerHTML=speed;
}
</script>
我正在制作一个简单的速度计算器,但它不起作用。输出来自 [object HTMLSpanElement] 任何帮助将不胜感激,因为我是javascript的新手。
答案 0 :(得分:5)
最后一行中的变量speed
与您设置的变量var calculate = function() {
var distance = document.getElementById("distance").value;
var time = document.getElementById("time").value;
var speed = distance/time;
if (speed=="Infinity" || speed=="NaN"){
document.getElementById("speed").innerHTML="Invalid Input";
document.getElementById("unit").innerHTML="";
}else{
document.getElementById("speed").innerHTML=speed;
}
};
不同,因为它位于不同的范围内。
试试这个:
{{1}}
答案 1 :(得分:1)
原因是范围:
var calculate = function() {
var distance = document.getElementById("distance").value;
var time = document.getElementById("time").value;
var speed = distance/time;
}
// speed is not within the right scope anymore
// because you closed the function above!
if (speed=="Infinity" || speed=="NaN"){
document.getElementById("speed").innerHTML="Invalid Input";
document.getElementById("unit").innerHTML="";
}else{
document.getElementById("speed").innerHTML=speed;
}
由于您的脚本在document
中运行,因此speed
的值将被解析为元素<span id="speed" ... >
。
在函数内移动最后一个if语句:
var calculate = function() {
var distance = document.getElementById("distance").value;
var time = document.getElementById("time").value;
var speed = distance/time;
if (speed=="Infinity" || speed=="NaN"){
document.getElementById("speed").innerHTML="Invalid Input";
document.getElementById("unit").innerHTML="";
}else{
document.getElementById("speed").innerHTML=speed;
}
}
答案 2 :(得分:0)
这是一个非显而易见的问题。它有助于适当的缩进
var calculate = function() {
var distance = document.getElementById("distance").value;
var time = document.getElementById("time").value;
var speed = distance/time;
}
if (speed=="Infinity" || speed=="NaN"){
document.getElementById("speed").innerHTML="Invalid Input";
document.getElementById("unit").innerHTML="";
} else{
document.getElementById("speed").innerHTML=speed;
}
您分配的speed
的值实际上并未在代码中的任何位置定义。 speed
内部的calculate
未被使用,因为它在功能范围内。您实际分配的speed
是浏览器根据您为元素提供的id
自动创建的calculate
。
如果您将作业放在var calculate = function() {
var distance = document.getElementById("distance").value;
var time = document.getElementById("time").value;
var speed = distance/time;
if (speed=="Infinity" || speed=="NaN"){
document.getElementById("speed").innerHTML="Invalid Input";
document.getElementById("unit").innerHTML="";
} else{
document.getElementById("speed").innerHTML=speed;
}
}
中,则问题将得到解决。
{{1}}