我有一个接受用户输入的html文件,然后使用Javascript根据这些输入计算一个值。程序完成后,该结果将显示在输入框中。
我想做的是,当您单击按钮运行javascript时,显示结果的输入框将显示“正在计算…”,直到计算完成(计算可能需要~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元素的事件在JavaScript代码片段完成之后才会发生(因为浏览器将这些事情安排在队列中)。
您需要做的是在计算开始之前让JavaScript中断队列:
将值更新为“Calculating”(将重新绘制放在队列的末尾)
使用setTimeout()设置计时器0秒(计时器启动计算代码)
当计时器立即触发时,它会在元素重新绘制之后,将对队列末尾的计算代码的调用置于队列末尾。

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

这样,JavaScript将设置字段值、设置计时器并完成。然后队列中的下一个是重新绘制应答元素;然后计时器将触发并启动计算逻辑。

关于javascript - 运行Javascript时更新html文本框,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/4025086/

10-14 18:15
查看更多