m
Clever Geek Handbook

Returns [HTMLSpanElement object]

<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 doesn't work. Result: [HTMLSpanElement object] Any help would be appreciated as I'm new to javascript.

+3


source to share


3 answers


The variable speed

on the last line is not the same as the one you set as it is in a different scope.

Try the following:



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


source


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

Since your script is running in document

, the value is speed

resolved as an element <span id="speed" ... >

.



Move the last if statement inside the function:

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


source


This is not an obvious problem. It helps with correct 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 speed

you are assigning is not actually defined anywhere in your code. speed

is calculate

not used internally as it is limited within the function. speed

which you actually assign is the one that the browser automatically builds based on id

what you passed to your element.

If you put assignment to yours calculate

, the problem will be fixed.

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


source






More articles:


All Articles