Question

我想添加一个“提交”按钮，以便在按下提交后执行公式，但我似乎无法将提交按钮连接到代码，只有在按下按钮时才能更新总排放量。

当您输入车辆类型和行驶里程并按下页面上的其他位置时，总排放量会更新。我正在尝试实施“提交”或“计算”按钮，以便仅在单击按钮时更新总排放量。

我还想将Javascript包装在一个函数而不是window.onload中，但我不知道如何实现它。

 window.onload = function () {
        var carType = document.getElementById('VehicleType');
		var total = document.getElementById('totalEmissions');
		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 = "";
          }
        };
   
		miles.onchange = function () {
            if(miles.value && carType.value){
              total.value = parseFloat(carType.value) * parseFloat(miles.value)
            }
            if(!miles.value || !carType.value){
              total.value = "";
            }
		};		
};

<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>元素。只需创建一个，给它id，然后听取其click事件，而不是其他两个元素的change事件。检查单击时执行的函数内的有效性并显示结果，如下所示：

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：正如@ScottMarcus在评论中指出的那样，最好不要使用onXyz，而是使用.addEventListener(eventName, callback)。

注2：我建议重新检查您的HTML，如果这不是更大的一部分，因为我可以看到一些问题（我在我的代码片段中修复）。 W3C Markup Validation Service是检查标记中问题的好地方。

如何在Javascript / HTML计算表单上实现“提交”按钮？

1 个答案: