Question

我有一个接受用户输入的html文件，然后使用Javascript根据这些输入计算一个值。程序结束后，该结果将显示在输入框中。

我想做的是，当你点击按钮运行javascript时，显示结果的输入框将显示'Calculating ...'，直到计算完成（计算可以采取~5秒）。但是，如果我提出类似的内容：

document.getElementById('answer').value = 'Calculating...';

在我的Javascript代码的最顶层，它似乎不会在运行时更新输入字段。而是运行该程序，然后在输入字段中最终更新结果。

任何人都知道我在运行程序时如何更新输入字段，然后在程序结束后再次使用结果更新它？

谢谢！

编辑：以下是对我的代码的更好解释

<td colspan=1 align=left><input id="button" value="Calculate" onclick=calculate(this.form.type.value,this.form.d.value,this.form.c.value,this.form.freq.value)>
<input id="answer" readonly="true">
</td>
</tr>

function calculate(type,d,c,f) {
    //Performs some calculation
    document.getElementById('answer').value = TS;
}

Answer 1

这是因为重新绘制answer元素的事件要么在你的JavaScript代码段完成之后才会发生（因为浏览器会在队列中安排这些事情）。

您需要做的是让JavaScript在计算开始之前中断队列：

将值更新为“正在计算”（将重新绘制放在队列的末尾）
使用setTimeout()设置计时器0秒（计时器启动计算代码）

当计时器立即触发时，它将调用计算代码在队列末尾，在元素重新绘制之后。

<script>
document.getElementById('answer').value = 'Calculating...';
setTimeout( your_calculation(), 0);
</script>

这样，您的JavaScript将设置字段值，设置计时器并完成。然后队列的下一步是重新绘制答案元素;然后计时器启动并启动计算逻辑。

Answer 2

在进行计算之前，您必须使用超时来刷新界面。

document.getElementById('answer').value = 'Calculating...'; 

setTimeout( function() { 

    // TODO put your actual calculation statements/function calls here.

    // document.getElementById('answer').value = answer;

}, 0 );

Answer 3

在我看来，您正在为页面上可能尚不存在的元素设置值。检查DOM是否已准备就绪。

教程：http://www.javascriptkit.com/dhtmltutors/domready.shtml

Answer 4

是什么意思在onclick事件上？

<script>
function onReady() {
  document.getElementById('button').click = function() {
    document.getElementById('answer').value = 'Calculating...';
    document.getElementById('answer').value =  doCalculation();
  }
}
</script>
<body unload="onReady()">

在Javascript运行时更新html文本框

4 个答案: