具有多种测量选项的体积计算器

Question

我正在尝试创建一个体积计算器，用户可以在其中输入宽度长度和深度，以及 5 种不同单位的选择。如果他们愿意，他们可以将所有三个都放在不同的单位，但我需要输出以米 ^3 为单位。所以我认为最简单的方法是先将所有测量值转换为米，然后将它们全部相乘以获得体积，但是作为 javascript 和编码的新手，我发现这比我想象的要大。下面是我的 HTML 和 JS 代码我尽力展示我的想法（通过使用注释）以及我在 js 代码的每个阶段试图实现的目标。下面的代码没有输出任何东西，我不确定我哪里出错了，或者即使其中任何一个都是正确的！任何帮助表示赞赏但是我会非常感谢评论解释我哪里出错了提示我下次应该关注什么以及推荐的任何阅读等因为我正在努力改进而不是仅仅获得解决方案并且没有获得额外的知识:)再次感谢你！<table class="calculator">  <div class="calculatorheading">    <h1> Use our simple calculator below to calculate the amount you need!</h1>  </div>  <tbody>    <tr>      <td>Width</td>      <td><input type="text" id="width" /></td>      <td>        <select id="width-type">          <option value="meters">Metres</option>          <option value="centimeter">Centimeter</option>          <option value="inches">Inches</option>          <option value="feet">Feet</option>          <option value="yards">Yards</option>        </select>      </td>    </tr>    <tr>      <td>Length</td>      <td><input type="text" id="length" /></td>      <td>        <select id="length-type">          <option value="meters">Metres</option>          <option value="centimeter">Centimeter</option>          <option value="inches">Inches</option>          <option value="feet">Feet</option>          <option value="yards">Yards</option>        </select>      </td>    </tr>    <tr>      <td>Depth</td>      <td><input type="text" id="depth" /></td>      <td>        <select id="depth-type">          <option value="meters">Metres</option>          <option value="centimeter">Centimeter</option>          <option value="inches">Inches</option>          <option value="feet">Feet</option>          <option value="yards">Yards</option>        </select>      </td>    </tr>    <tr>      <td colspan="3">        <button onclick="calculateVolume()">Calculate</button>      </td>    </tr>    <tr>      <p id="result"></p>    </tr>  </tbody></table>

Answer 1

• <div>不是有效的直系<table>后代

• 使用您的单位到仪表值乘数创建一个对象（考虑可重用性）。toMeters在下面的例子中。

• 请记住，输入值（即使type="number"）始终是一个 String - 因此在 JavaScript 中，您必须将该 String 解析为 Float 使用parseFloat(str)

• 用于.toFixed()将精度舍入到定义的小数点精度

// Just some nifty helpers to get DOM element/s

const ELS = (sel, EL) => (EL || document).querySelectorAll(sel);

const EL = (sel, EL) => (EL || document).querySelector(sel);

// Cache your elements

const EL_result = EL("#result");

const EL_w  = EL("#width");

const EL_l  = EL("#length");

const EL_d  = EL("#depth");

const EL_uw = EL("#unit-width");

const EL_ul = EL("#unit-length");

const EL_ud = EL("#unit-depth");

const toMeters = (str = "1", unit = "m") => str.trim() * {

  m : 1,

  cm: 100,

  in: 39.37,

  ft: 3.28084,

  yd: 1.09361

}[unit];

function calcVol() {

  const w = toMeters(EL_w.value, EL_uw.value);

  const l = toMeters(EL_l.value, EL_ul.value);

  const d = toMeters(EL_d.value, EL_ud.value);

  const tot = w * l * d;

  EL_result.textContent = Number(tot.toFixed(5));

}

ELS(".calc").forEach(el => el.addEventListener("input", calcVol));

// init!

calcVol();

span.label {display: inline-block; min-width: 80px; font:14px sans-serif;}

<span class="label">Width</span>

<input id="width" class="calc" type="number" value="1" min="0" step="0.1">

<select id="unit-width" class="calc">

  <option value="m">Metres</option>

  <option value="cm">Centimeter</option>

  <option value="in">Inches</option>

  <option value="ft">Feet</option>

  <option value="yd">Yards</option>

</select>

<br>

<span class="label">Length</span>

<input id="length" class="calc" type="number" value="1" min="0" step="0.1">

<select id="unit-length" class="calc">

  <option value="m">Metres</option>

  <option value="cm">Centimeter</option>

  <option value="in">Inches</option>

  <option value="ft">Feet</option>

  <option value="yd">Yards</option>

</select>

<br>

<span class="label">Depth</span>

<input id="depth" class="calc" type="number" value="1" min="0" step="0.1">

<select id="unit-depth" class="calc">

  <option value="m">Metres</option>

  <option value="cm">Centimeter</option>

  <option value="in">Inches</option>

  <option value="ft">Feet</option>

  <option value="yd">Yards</option>

</select>

<br>

<span class="label">VOLUME:</span>

<span id="result">0</span> m³