Javascript 返回 [对象 HTMLSpanElement]

Returns [object HTMLSpanElement]

提问by Asmastas Maz

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

I am making a simple speed calculator but it isn't working. The output comes [object HTMLSpanElement]Any help will be appreciated for I am new to javascript.

我正在制作一个简单的速度计算器，但它不起作用。输出来自[object HTMLSpanElement]任何帮助将不胜感激，因为我是 javascript 新手。

回答by sachleen

The variable speedin the last line is not the same as the one you set because it's in a different scope.

speed最后一行中的变量与您设置的变量不同，因为它在不同的范围内。

Try this:

尝试这个：

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

回答by Ja?ck

The reason is scope:

原因是范围：

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

Because your script runs in document, the value of speedis resolved as the element <span id="speed" ... >.

因为您的脚本在 中运行document，所以 的值speed被解析为元素<span id="speed" ... >。

Move the last if-statement inside the function:

移动函数内的最后一个 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;
  }
}

回答by loganfsmyth

This is a non-obvious issue. It helps with proper indentation

这是一个不明显的问题。它有助于适当的缩进

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

The value of speedthat you are assigning is not actually defined anywhere in your code. The speedfrom inside of calculateis not used because it is scoped within the function. The speedyou are actually assigning is one that the browser automatically creates based on the idyou have given to your element.

speed您分配的值实际上并未在代码中的任何地方定义。在speed从内calculate不使用，因为它是在函数里作用域。在speed您实际分配是一个浏览器自动创建一个基于id你给你的元素。

If you put the assignment within your calculate, the problem will be fixed.

如果您将分配放在您的 中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;
  }
}