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