javascript - 基于输入字段即时计算结果

Question

这是此线程的扩展。

---

我的情况：

• 我需要用户输入一个十进制值（即 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>

Answer 1

将 ParseFolat 用于十进制数

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

ParseFloatSample

Answer 2

1. 使用parseFloat而不是parseInt. http://jsfiddle.net/janCY/

2. 没有这样的功能getElementByClass。有getElementsByClassName，它返回带有元素的数组。但是为什么不使用JQuery呢？

Answer 3

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

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