在运行 Javascript 时更新 html 文本框答案

【问题标题】：Update html text box while Javascript is running在运行 Javascript 时更新 html 文本框
【发布时间】：2010-10-26 15:13:18
【问题描述】：

我有一个接受用户输入的 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;
}

【问题讨论】：

能否也看看答案元素的html代码。

标签： javascript html input field

【解决方案1】：

这是因为在 JavaScript sn-p 完成之前不会发生重新绘制 answer 元素的事件（因为浏览器将这些事情安排在队列中）。

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

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

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

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

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

【讨论】：

很好的答案，但我只是对您的代码示例有一点抱怨。您可能只想传递它，而不是调用 your_calculation 函数。

【解决方案2】：

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

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

setTimeout( function() { 

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

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

}, 0 );

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

是指 onclick 事件？

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

【讨论】：

是的，我说的是 onclick 事件。当我尝试您提供的代码时，开始计算的按钮会在页面首次加载时变成一个显示“计算”的文本字段。我的按钮代码是：
我认为问题出在你的计算函数中，“this”是指触发事件的元素，所以我认为你有一些放错位置的变量。