Outputting text after this JS progressbar finishes loading

[genki01]

I'm using this progress bar from http://www.dynamicdrive.com/dynamicindex11/xpprogressbar.htm and I want to be able to display some text after the bar finishes loading.

I figured out out to get it to output the text, but it loads in a new page. I want to get it to load where the bar is located. Here's how I'm placing the code now:

<td>
<script type="text/javascript">
var bar2= createBar(320,15,'white',1,'black','green',85,7,3,"document.write('hello world')");
</script>
        </td>

That shows the bar in the middle of my table, when it finishes it just opens to a new page saying hello world at the top. Is there a way to get it to spit out hello world in place of the bar, or at least in that table?

[fxm]

The exact code depends on the type of the element you want the message to appear in and on whether the action statement requires global variables, but the general idea is something like this

var oMsg = document.getElementById('yourId')
var bar2= createBar(320,15,'white',1,'black','green',85,7,3,"oMsg.innerHTML='hello world'");

[genki01]

Hi, I tried replacing my code with yours but it didn't work...I'm guessing I needed to do something else with yourId? Sorry I barely know HTML much less JS.

As a workaround I'm using:

<td>
<script type="text/javascript">
function redirectpage(){
bar2.togglePause()
window.location="new.php"
}

      var bar2= createBar(320,15,'white',1,'black','green',85,7,3,"redirectpage()");
</script>
        </td>

and just making new.php a copy of the original, with the text replacing the progress bar code in that table. It works in a pinch but it's rather inelegant.

[fxm]

needed to do something else with yourId?

You need to pick a suitable element and give it that id=. For example

<td id='yourId'>message will go here</td>

The choice of element depends on the page layout, obviously, plus some elements either don't have the .innerHTML property or are otherwise not suitable for the present purpose.

[genki01]

Thanks, was given the following solution that works great:

<td>
<span id='hw'></span>
<script type="text/javascript">
var bar2= createBar(320,15,'white',1,'black','green',85,7,3,"helloworld();");

function helloworld() {
	bar2.hideBar();
	document.getElementById('hw').innerHTML="hello world";
}
</script>
        </td>