基于输入字段即时计算结果答案

【问题标题】：calculation based on input field for a result on the fly基于输入字段即时计算结果
【发布时间】：2013-05-21 04:48:57
【问题描述】：

这是this thread的扩展。

我的情况：

我需要用户输入一个十进制值（即 0.05）并在用户键入（或粘贴）时即时显示一个简单的计算。所示示例适用于整数，但在输入字段中输入小数时无效。
我需要在多个位置显示结果。我以为我可以将 getElementById 更新为 getElementByClass，但这没有用。

我的代码：

<input type="text" name="capname" id="numberField" value="0.07" maxlength="5" />
<span name="mpd" id="mpdresult" class="mpdresult" ></span>  
<span class="mpdresult" ></span> (second display)

<script>
window.onload = function() {
   var base = 500;
   var numberField = document.getElementById('numberField');
   numberField.onkeyup = numberField.onpaste = function() {
      if(this.value.length == 0) {
         document.getElementById('mpdresult').innerHTML = '';
         return;
      }
      var number = parseInt(this.value);
      if(isNaN(number)) return;
      document.getElementById('mpdresult').innerHTML = number * base;
   };
   numberField.onkeyup(); //could just as easily have been onpaste();
};
</script>

【问题讨论】：

这里的大多数人似乎都专注于浮点解析部分。如果你想使用getElementsByClass 更新多个输入，你需要记住它返回一个数组而不是单个元素。这样您就可以获取数组，然后遍历数组，将每个元素的 innerHTML 设置为您的答案。
感谢@ChrisO'Kelly 的解释 - 我将不得不再调查一下。也许 JQuery 有一个更简单的选择。
确实如此。对于 jQ，您将使用 $('.classname').each(function(){doSomethingWith(this)});

标签： javascript input calculated-field

【解决方案1】：

请使用 var number = parseFloat(this.value);

而不是 var number = parseInt(this.value);

【讨论】：

【解决方案2】：

将 ParseFolat 用于十进制数

document.write(parseFloat("10.33") + "<br>");

ParseFloatSample

【讨论】：

【解决方案3】：

使用parseFloat 而不是parseInt。 http://jsfiddle.net/janCY/
没有这样的功能getElementByClass。有getElementsByClassName，它返回带有元素的数组。但是为什么不用JQuery呢？

【讨论】：

感谢您的帮助。我会查找一些 JQuery 的东西，但我不太熟悉它。关于从哪里开始的任何提示？我会替换整个脚本还是只替换将返回值放在多个位置的操作？