Question

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.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

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.