Mettre à jour la zone de texte html pendant que Javascript est en cours

J'ai un fichier html qui accepte les entrées de l'utilisateur, puis utilise Javascript pour calculer une valeur basée sur ces entrées. Ce résultat est ensuite affiché dans une zone de saisie une fois le programme terminé. Ce que je voudrais faire est de faire en sorte que lorsque vous cliquez sur le bouton pour exécuter le javascript, la boîte de saisie affichant le résultat affichera 'Calculer ...' jusqu'à la fin du calcul (le calcul peut prendre ~ 5 secondes). Cependant, si je mets quelque chose comme:Mettre à jour la zone de texte html pendant que Javascript est en cours

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

au sommet de mon code Javascript, il ne semble pas mettre à jour le champ de saisie chaque fois qu'il fonctionne. Au lieu de cela, le programme s'exécute et le résultat est finalement mis à jour dans le champ de saisie. Quelqu'un sait-il comment je peux mettre à jour le champ de saisie lorsque j'exécute le programme, puis le réactualiser avec le résultat une fois le programme terminé?

Merci!

EDIT: est ici une meilleure explication de mon 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; 
}

Source

2010-10-26 Josiah

pouvons-nous également voir le code html pour l'élément de réponse, s'il vous plaît. – Spudley

C'est parce que l'événement de nouveau dessin de l'élément de réponse ne se produit pas avant votre extrait de code JavaScript est fait (puisque les horaires de navigateur ces choses dans une file d'attente).

Ce que vous devez faire est d'avoir votre JavaScript interrompre la file d'attente avant le calcul commence:

Mise à jour de la valeur de « Calcul » (met la re-tirage au sort à la fin de la file d'attente)
Réglez une minuterie à l'aide setTimeout() pendant 0 secondes (avec la minuterie lancement du code de calcul)
Lorsque les feux de minuterie immédiatement, il mettra l'appel au code de calcul à la fin de la file d'attente, après l'élément redessiner.
```
<script> 
document.getElementById('answer').value = 'Calculating...'; 
setTimeout(your_calculation(), 0); 
</script> 
```

De cette façon, votre JavaScript règlera la valeur sur le terrain, régler la minuterie et terminer. Ensuite, dans la file d'attente se trouve le nouveau dessin de l'élément de réponse; et ALORS la minuterie s'éteint et lance la logique de calcul.

Source

2010-10-26 15:23:10 DVK

Excellente réponse, mais j'ai juste une petite plainte à propos de votre échantillon de code. Au lieu d'invoquer la fonction your_calculation, vous voulez probablement le passer. – Neall

Il me semble que vous définissez une valeur sur un élément qui ne peut pas exister sur la page encore. Vérifiez que le DOM est prêt en premier.

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

Source

2010-10-26 15:16:33 Brad

Yean signifie l'événement onclick?

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

Source

2010-10-26 15:19:20

Oui, je parle de l'événement onclick. Lorsque j'essaie le code que vous avez fourni, le bouton permettant de commencer le calcul est transformé en un champ de texte qui indique "Calculer" lorsque la page est chargée. Le code que j'avais pour le bouton est: – Josiah

Je pense que la faute est dans votre fonction de calcul, "ceci" se réfère à l'élément qui a déclenché l'événement, donc je pense que vous avez des variables mal placées. –

Vous devez utiliser un délai d'expiration pour permettre à l'interface de se rafraîchir avant d'effectuer le calcul.

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

setTimeout(function() { 

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

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

}, 0);

Source

2010-10-26 15:22:12 lincolnk

Mettre à jour la zone de texte html pendant que Javascript est en cours

Répondre

Questions connexes