如何在不刷新页面的情况下更新HTML中的JavaScript变量值

Question

我将收集一个文本区域的值（十进制数字），使用它的ID存储到JavaScript变量中，并添加另一个变量的值（十进制数字），然后在同一HTML页面中显示结果。

文本区域代码：

<div class="input-resp"><span><input  class="textbox" id="num" name="count" type="text" size="5" maxlength="3"  value="" /></span></div>

将值传递给变量并将其添加到另一个变量中。

var a = document.getElementById('num').value;
var b = 1000;
var c = parseFloat(a) + parseFloat(b); 

将变量c传递给id为test的div。

document.getElementById("test").innerHTML = c;

测试ID的HTML

<div id="test"></div>

但是，每当我用新数字更新文本区域时，最终输出不会立即更新。我必须手动刷新页面才能获取新值。有没有办法在不刷新页面的情况下更新值？

- acr

---

你的jQuery在哪里？你定义变量data是在哪里？还有，你是怎么做到的？用点击事件吗？ - putvande

@putvande：'data' 是一个拼写错误。变量应该是 a、b 和 c。没有点击事件，我希望在文本区域中输入时能够更新数值。 - acr

Answer 1

如果要在输入时实时更新，您需要一个事件处理程序：

document.getElementById('num').onkeyup = function() {
    var a = 1000 + parseFloat(this.value);
    document.getElementById("test").innerHTML = a || 0;
}

FIDDLE

- adeneo

---

请注意，不需要对数字“1000”进行parseFloat。还要注意，这仅适用于键盘输入，而不适用于粘贴或任何其他输入，请根据您的需求使用适当的事件（例如，“input”事件）。 - David Hellsing

@David - input事件并不是被广泛支持的。 - adeneo

同意，但是对于旧浏览器还有其他模拟的方法，例如使用 setInterval。我只是提一下，以防万一 OP 也需要考虑旧版本。 - David Hellsing