ansaurus

Question

Update html text box while Javascript is running

Answer 1

A:

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

Brad 2010-10-26 15:16:33

Answer 2

A:

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()">

Mark Baijens 2010-10-26 15:19:20

Yeah, I'm talking about the onclick event. When I try the code you provided, the button for beginning the calculation is turned into a text field that says "Calculate" when the page first loads. The code I had for the button is: <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)>

jrenfree 2010-10-26 15:38:19

I think the fault is in your calculate function, "this" refers to the element that fired the event, so i think you have some misplaced variables.

Mark Baijens 2010-10-26 16:02:49

Answer 3

+1 A:

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 );

lincolnk 2010-10-26 15:22:12

Answer 4

+3 A:

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.

DVK 2010-10-26 15:23:10

Excellent answer, but I just have a small complaint about your code sample. Instead of invoking the your_calculation function, you probably just want to pass it.

Neall 2010-10-26 15:49:57

ansaurus

tags:

views:

answers:

Update html text box while Javascript is running

related questions