Question

如何编写此javascript代码以显示在＆＃34;英语总结果中显示的答案：＆＃34;小数点后显示3位数的方框？

感谢任何帮助。

在此处查看完整设置：jsfiddle

＆＃13;

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

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

Answer 1

Fiddle中函数的最后一行仍然是错误的。它仍然不适用于Fiddle（至少对我而言），直到我从＆＃34; onload＆＃34;到＆＃34;没有换行＆lt; body＆gt;＆＃34;在Fiddle的最左边一列，就在下拉菜单下面＃34; No Library（Pure JS）＆＃34;。我不知道它是否是正确的（如果不仔细查看，我甚至不知道它的作用是什么）但它对我有用。

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

但是在获得结果之前它会持续很长时间，您需要在Chrome或Firefox窗口外单击才能显示结果。这意味着此处出现了其他问题，而且是onchange事件。当元素失去焦点时触发它（你不需要在窗口外面点击，就在里面的其他地方）并且这不是你想要的东西，我想。还有另一个名为oninput的事件触发器，它可能会执行您想要的操作，但每次用户输入内容时都会调用calc()。

Answer 2

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

还应该有一个“计算”按钮来使表单更新，onchange本身是不够的。但我会留下你的补充。

e.g。

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

2 个答案: