如何更改基于下拉框的计算？

Question

免责声明可能的问题无知 - 我在编码方面超级超级绿色 Javascript，我正在寻找一些友好的建议。

我想为网站编写一个非常基本的计算器。该计算器根据大小对房间的热输出要求进行了非常简单的计算。但我希望根据用户选择的下拉选项稍微改变计算，即如果用户想输入米或英尺。

代码（当前）如下：

    function Calculate() {
      var a = document.getElementById("height").value;
      var b = document.getElementById("width").value;
      var c = document.getElementById("depth").value;
      var d = +a * +b * +c / 14;
      var x = d.toFixed(2);
      document.getElementById("result").innerHTML = x;
    }

<form style="width:100px;" name="myForm">
  <td>
    <td>Units:</td>
    <td>
      <Select name="units">
        <option>Metres</option>
        <option>Feet</option>
      </select>
    </td>
    </tr>
</form>

<form>
  <table>
    <tr>
      <td style="padding-right:10px;">Height:</td>
      <td>
        <input style="width:100px;" type="text" name="Height" id="height">
      </td>
    </tr>
    <tr>
      <td style="padding-right:10px;">Width:</td>
      <td>
        <input style="width:100px;" type="text" name="Width" id="width">
      </td>
    </tr>
    <tr>
      <td style="padding-right:10px;">Depth:</td>
      <td>
        <input style="width:100px;" type="text" name="Depth" id="depth">
      </td>
    </tr>
    <br>

    <tr>
      <td style="padding-right:10px;">
        <input type="button" onclick="Calculate()" value="Calculate" />
      </td>
    </tr>

    <tr>
      <td style="padding-right:10px;">Heat output required in kW:</td>
      <td>
        <p id="result"></p>
      </td>
    </tr>
  </table>
</form>

我基本上是在寻找下拉框来将 'var d' 中的计算从规定的计算更改为 ((+a * +b * +c) *0.03) /14

就这么简单。我已经阅读了各种主题，但它们似乎并不能完全解释我所追求的内容。

如有任何帮助，我们将不胜感激。

Answer 1

我会给你的 select 一个 id 然后查询你的 select 并得到 selected 选项的文本。如果它是 'Metres' 以一种方式进行，否则以另一种方式进行，如下所示：

function Calculate() {
  var s = document.getElementById("units");
  var measure = s.options[s.selectedIndex].text;
  
  var a = document.getElementById("height").value;
  var b = document.getElementById("width").value;
  var c = document.getElementById("depth").value;
  var d;
  if(measure=="Metres")
    d = +a * +b * +c / 14;
  else
    d = ((+a * +b * +c) *0.03) /14;
  var x = d.toFixed(2);
  document.getElementById("result").innerHTML = x;
}

<form style="width:100px;" name="myForm">
  <td>
    <td>Units:</td>
    <td>
      <Select name="units" id="units">
        <option>Metres</option>
        <option>Feet</option>
      </select>
    </td>
    </tr>
</form>

<form>
  <table>
    <tr>
      <td style="padding-right:10px;">Height:</td>
      <td>
        <input style="width:100px;" type="text" name="Height" id="height">
      </td>
    </tr>
    <tr>
      <td style="padding-right:10px;">Width:</td>
      <td>
        <input style="width:100px;" type="text" name="Width" id="width">
      </td>
    </tr>
    <tr>
      <td style="padding-right:10px;">Depth:</td>
      <td>
        <input style="width:100px;" type="text" name="Depth" id="depth">
      </td>
    </tr>
    <br>

    <tr>
      <td style="padding-right:10px;">
        <input type="button" onclick="Calculate()" value="Calculate" />
      </td>
    </tr>

    <tr>
      <td style="padding-right:10px;">Heat output required in kW:</td>
      <td>
        <p id="result"></p>
      </td>
    </tr>
  </table>
</form>

如何更改基于下拉框的计算？

How do I change a calculation based on a drop down box?

javascript

calculator