返回[object HTMLSpanElement]

时间:2013-02-18 06:10:51

标签: javascript html

<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">&nbsp;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的新手。

3 个答案:

答案 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}}