Javascript/HTML計算フォームに[送信]ボタンを実装するにはどうすればよいですか？

Question

提出が押された後に式を実行するために「送信」ボタンを追加したいが、送信ボタンをコードに接続して、ボタンを押したときにのみ排出量を更新するように見えることはできない。

車のタイプとマイル数を入力し、ページ上の他の場所を押すと、合計排出量が更新されます。私はボタンをクリックしたときにのみ総排出量が更新されるように 'submit'または 'calculate'ボタンを実装しようとしています。

私はまた、window.onloadではなく関数でJavascriptをラップしたいと思いますが、その実装方法もわかりません。あなたが必要なもの

window.onload = function() { 
 
     var carType = document.getElementById('VehicleType'); 
 
\t \t var total = document.getElementById('totalEmissions'); 
 
\t \t var miles = document.getElementById('milesDriven'); 
 
     
 
     carType.onchange = function(){ 
 
      if(miles.value){ 
 
      total.value = parseFloat(carType.value) * parseFloat(miles.value); 
 
      } 
 
      if(!miles.value || !carType.value){ 
 
      total.value = ""; 
 
      } 
 
     }; 
 
    
 
\t \t miles.onchange = function() { 
 
      if(miles.value && carType.value){ 
 
       total.value = parseFloat(carType.value) * parseFloat(miles.value) 
 
      } 
 
      if(!miles.value || !carType.value){ 
 
       total.value = ""; 
 
      } 
 
\t \t }; \t \t 
 
};

<strong>Car Type</strong></th><br> 
 
    <select name="VehicleType" id="VehicleType"> 
 
     <option value="">Select an option…</option> 
 
     <option value="552">Sprinter Van</option> 
 
     <option value="444">Personal Car</option> 
 
     <option value="444">Renter Car</option> 
 
     <option value="140">Bus or Shuttle</option> 
 
     <option value="727">Diesel Truck</option> 
 
     <option value="683">Regular Truck</option> 
 
</select> 
 

 
<br><br> 
 

 
<strong>Miles Driven</strong></th><br> 
 
    <td width="65"><input type="text" name="milesDriven" id="milesDriven" size="15" maxlength="5"/></td> 
 
    <td width="43">miles</td> 
 
<br><br> 
 

 
<strong>Total CO2 Emissions (grams)</strong><br> 
 
    <td><input type="text" name="totalEmissions" id="totalEmissions" size="15" maxlength="5"/></td>

Answer 1

送信ボタンではなく、定期的な<button>要素。 1つを作成してidとし、他の2つの要素のchangeイベントではなく、clickイベントを待ち受けます。 @ScottMarcusが代わりに使用するのでは、コメントで指摘したように：

window.onload = function() { 
 
    var carType = document.getElementById('VehicleType'); 
 
    var total = document.getElementById('totalEmissions'); 
 
    var miles = document.getElementById('milesDriven'); 
 
    var calculateButton = document.getElementById('calculateButton'); 
 
    calculateButton.addEventListener('click', calculate); 
 

 
    function calculate() { 
 
    if (miles.value && carType.value) { 
 
     total.value = parseFloat(carType.value) * parseFloat(miles.value); 
 
    } 
 
    if (!miles.value || !carType.value) { 
 
     total.value = ""; 
 
    } 
 
    }; 
 
};

<strong>Car Type</strong><br> 
 
<select name="VehicleType" id="VehicleType"> 
 
     <option value="">Select an option…</option> 
 
     <option value="552">Sprinter Van</option> 
 
     <option value="444">Personal Car</option> 
 
     <option value="444">Renter Car</option> 
 
     <option value="140">Bus or Shuttle</option> 
 
     <option value="727">Diesel Truck</option> 
 
     <option value="683">Regular Truck</option> 
 
</select> 
 

 
<br><br> 
 

 
<strong>Miles Driven</strong><br> 
 
<input type="text" name="milesDriven" id="milesDriven" size="15" maxlength="5" />&nbsp;miles 
 
<br><br> 
 

 
<strong>Total CO2 Emissions (grams)</strong><br><input type="text" name="totalEmissions" id="totalEmissions" size="15" maxlength="5" /> 
 
<br><br> 
 

 
<button id="calculateButton">Calculate</button>

注1：このように、あなたはそれをクリックだときに実行し、結果を表示する関数内で有効性を確認しますonXyzの場合は、.addEventListener(eventName, callback)を使用することをお勧めします。

注2：は、私は（私は私のスニペットで修正された）、私は見ることができますいくつかの問題があるとして、これは、何か大きなものの一部でない場合、あなたのHTMLを再チェックすることをお勧め。 W3C Markup Validation Serviceは、マークアップの問題をチェックするのに最適な場所です。