本次计算小数点右Javascript码

Question

如何编写此 javascript 代码，以便答案显示在 "Total Result in Inches:" 框中，小数点后显示 3 位数字？

感谢任何帮助。

在此处查看完整设置：jsfiddle

 function calc() {
   var l = parseInt(document.getElementById("length").value);
   var w = parseInt(document.getElementById("width").value);
   var h = parseInt(document.getElementById("height").value);
   var v = (l * w * h / 1728);

   document.getElementById('result').value = v;
 }

#calc-container {
  width: 270px !important;
  padding: 5px!important;
  background: #DEEBF7!important;
  margin: 0px 0px 10px 80px!important;
  border-radius: 5px!important;
  -moz-border-radius: 5px!important;
  -webkit-border-radius: 5px!important;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5)!important;
  -webkit-box-shadow!important: 0 0 4px rgba(0, 0, 0, 0.7)!important;
  -moz-box-shadow: 0 0px 4px rgba(0, 0, 0, 0.7)!important;
}

<div id="calc-container">
  <input id="length" class="calc" size="5" maxlength="5" placeholder="Length" onchange="calc()">x
  <input id="width" class="calc" size="4" maxlength="5" placeholder="Width" onchange="calc()">x
  <input id="height" class="calc" size="5" maxlength="5" placeholder="Height" onchange="calc()">
  <br>Total Result in Cu.Ft.:
  <input id="result" name="result" readonly size="7" style="text-align: center">
</div>

Answer 1

Fiddle中函数的最后一行还是老错。它在 Fiddle 中仍然不起作用（至少对我而言），直到我在 Fiddle 最左边的列上从 "onload" 切换到 "No wrap - in <body>"，就在下拉菜单 [=21] 下方=].我不知道它是否正确（如果不查找它，我什至不知道它的作用）但它对我有用。

它也适用于 Firefox 41.0.2 和 Chrome 46.0.2490.80（64 位），如果我把它全部从 Fiddle（带有更正的行）放在 HTML 文件。

但它会持续很长时间，直到您得到结果，您需要在 Chrome 或 Firefox window 之外单击才能显示结果。这意味着这里还有其他问题，那就是 onchange 事件。它在元素失去焦点时触发（您不需要单击 window 外部，只需单击内部其他地方），我想这不是您想要的。还有另一个名为 oninput 的事件触发器，它可能会执行您想要的操作，尽管它会在每次用户输入内容时调用 calc()。

Answer 2

您的表单应该更易于访问，带有用于表单控件的标签和用于对它们进行分组的字段集。您应该验证输入值（在下面的示例中未完成）、处理错误并在写入屏幕之前检查结果。

还应该有一个 "calculate" 按钮来更新表单，onchange 本身是不够的。但我会留给你补充。

例如

function calc() {
  var form = document.getElementById('volume');
   
  // do form validation here
  
  var length = +form.length.value || 0;
  var width  = +form.width.value || 0;
  var height = +form.height.value || 0;
  
  var volume = length * width * height / 1728;
  console.log(volume);
  form.total.value = isNaN(volume)? '' : volume.toFixed(3);
}

<form id="volume">
  <fieldset><legend>Dimensions and volume</legend>
  <table id="calc-container">
    <tr>
      <td><label for="length">Length (inches): </label>
      <td><input id="length" name="length" class="calc" size="10" maxlength="5" onchange="calc()">
    <tr>
      <td><label for="width">Width (inches): </label>
      <td><input id="width" name="width" class="calc" size="10" maxlength="5" onchange="calc()">
    <tr>
      <td><label for="height">Height (inches): </label>
      <td><input id="height" name="height" class="calc" size="10" maxlength="5" onchange="calc()">
    <tr>
      <td><label for="total">Total volume (cubic feet):</label>
      <td><input id="total" name="total" readonly size="10">
  </table>
  </fieldset>
</form>

本次计算小数点右Javascript码

The Right Javascript code for decimal place in this calculation

javascript

decimal