Question

对于可能的问题无知的免责声明 - 我在编写Javascript时非常超级绿，我正在寻找一些友好的建议。

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

代码（目前）如下：

＆＃13;

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

＆＃13;

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

＆＃13;

我基本上都在寻找下拉框来改变“变量”中的计算方式。从规定的计算到 ((+a * +b * +c) *0.03) /14

就这么简单。我已经阅读了各种各样的帖子，但他们似乎并没有完全解释我所追求的内容。

非常感谢任何帮助。

Answer 1

我会选择一个id然后查询您的选择并获取所选选项的文本。如果它是'Meters'，那就用其他方式做，否则就这样做：

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>

如何根据下拉框更改计算？

1 个答案: