I'm trying to change the text in an h3 tag, but the changes don't happen until that the function is ended. I want to change the text immediately.

For example:

<h3 id="myText"></h3>
<input type="button" onClick="changeText('Hello');">

<script type="text/javascript">
   function changeText(str){
      document.getElementById('myText').innerHTML = str;
   }
</script>

Is it possible to refresh the screen immediately after changing the text? (Like flush() mand in C).

Note that if I put an alert after the mand, the text is changed immediately:

function changeText(str){
    document.getElementById('myText').innerHTML = str;
    alert('HelloWorld');
}

I'm trying to change the text in an h3 tag, but the changes don't happen until that the function is ended. I want to change the text immediately.

For example:

<h3 id="myText"></h3>
<input type="button" onClick="changeText('Hello');">

<script type="text/javascript">
   function changeText(str){
      document.getElementById('myText').innerHTML = str;
   }
</script>

Is it possible to refresh the screen immediately after changing the text? (Like flush() mand in C).

Note that if I put an alert after the mand, the text is changed immediately:

function changeText(str){
    document.getElementById('myText').innerHTML = str;
    alert('HelloWorld');
}

• javascript
• html

• Can I ask in which case the text does not change immediately? – Hieu Le Commented Jan 23, 2013 at 12:31
• If I've understood your question correctly then you want to bind to the mousedown event instead of click. – James Allardice Commented Jan 23, 2013 at 12:31
• 1 What else are you doing in the function? Is it something time-consuming? – bfavaretto Commented Jan 23, 2013 at 12:34
• The browser will not repaint until the function (and any calling chain of functions) pletes. But you can work around this using setTimeout() as per dystroy's answer. (An alert() is the exception to this rule because alert() is a blocking call so the browser has time to repaint.) – nnnnnn Commented Jan 23, 2013 at 12:38

2 Answers 2

To force an immediate refresh, you can do this :

document.getElementById('myText').innerHTML = str; // change the dom
setTimeout(function(){
   // do other things
}, 0);

The do other things code will be executed after the refresh.

But it's highly unusual to have a script go on running for seconds.

If you are talking about the refresh all the page, you will lose the content you have changed on the client side because it is stateless (between requests). If you persist it on a repository (session, application, files you can read and write, databases, etc..) on server side you can read from the server side and keep it on your html elements.

In Javascript you could implement an dictionary (element id on key and innerHTML on value) and use it as a cache and implement a flush method to display all changes, try something like:

<script>

var cacheChanges = {};

function addChange(element, value){
   cacheChanges[element] = value; 
}

function flush() {
  for(var i in cacheChanges)
  {
    var element = document.getElementById(i);
    if (element) {
      element.innerHTML = cacheChanges[i];
    }
  }
}


function ChangeSomething(){
  // do some changes
  addChange('myText', 'Hello');
  addChange('myText2', 'Hello 2');
  addChange('myText3', 'Hello 3');

  // apply all them
  flush();
}

</script>

and in your html:

  <h3 id="myText"></h3>
  <h3 id="myText2"></h3>
  <h3 id="myText3"></h3>

  <input type="button" onClick="ChangeSomething();">