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

簡単な速度計算機を作成していますが、機能していません。出力は[objectHTMLSpanElement]です。javascript を初めて使用する場合は、助けていただければ幸いです。

4

3 に答える 3

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;
  }
};
于 2013-02-18T06:15:52.610 に答える
2

理由はスコープです：

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;
  }
}
于 2013-02-18T06:17:33.123 に答える
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でスコープが設定されているため、frominsideは使用されません。実際に割り当てているのは、要素に指定し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;
  }
}
于 2013-02-18T06:17:39.983 に答える