Update html text box while Javascript is running_问答_开发者

Update html text box while Javascript is running

开发者 https://www.devze.com 2023-01-22 05:53 出处：网络

I have an html file that accepts user inputs then uses Javascript to calculate a value based on those inputs.That result is then displayed in an input box after the program has finished.

I have an html file that accepts user inputs then uses Javascript to calculate a value based on those inputs. That result is then displayed in an input box after the program has finished.

What I'd like to do is make it so that when you click on the button to run the javascript, the input box that displays the result will show 'Calculating...' until the calculation finishes (the calculation can take ~5 seconds). However, if I put something like:

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

at the very top of my Javascript code, it doesn't seem to update the input field whenever it runs. Instead, the program runs and then the result is finally updated in the input field.

Anyone know how I can update the input field when I run the program, then update it again with the result once the program finishes?

Thanks!

EDIT: Here's a better explanation of my code

<td colspan=1 align=left><input id="button" value="Calculate" onclick=calculate(this.form.type.value,this.form.d.value,this.form.c.va开发者_开发百科lue,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;
}

That is because the event of re-drawing of the answer element doesn't happen until AFTER your JavaScript snippet is done (since the browser schedules these things in a queue).

What you need to do is to have your JavaScript interrupt the queue before the calculation starts:

Update the value to "Calculating" (puts the re-draw on the end of the queue)
Set a timer using setTimeout() for 0 seconds (with the timer launching the calculation code)
When the timer fires off immediately, it will put the call to the calculation code at the end of the queue, after the element re-draw.
```
<script>
document.getElementById('answer').value = 'Calculating...';
setTimeout( your_calculation(), 0);
</script>
```

This way, your JavaScript will set the field value, set up the timer and finish. Then next on the queue is the re-drawing of the answer element; and THEN the timer fires off and launches the calculation logic.

You have to use a timeout to allow the interface to refresh before doing the calculation.

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

setTimeout( function() { 

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

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

}, 0 );

It sounds to me that you are setting a value on an element that may not exist on the page yet. Check for the DOM being ready first.

Tutorial: http://www.javascriptkit.com/dhtmltutors/domready.shtml

yean mean on the onclick event?

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