javascript hangs browser

Question

xmlDoc.load("cd_catalog.xml")

var cd=xmlDoc.getElementsByTagName("CD");
var id_set=1;
var id=xmlDoc.getElementsByTagName("ID"+id_set);

i=0;

function next()
{
if (i<id.length-1)
  {
  i++;
  display();

  }
}


function display()
{
document.write('<div class="dd">')
     document.write('<div class="blue" style="WIDTH:')
     document.write(cd[0].getElementsByTagName("ID"+id_set)[i].childNodes[0].nodeValue)
     document.write('"></div>')

document.write('</div>')

}


}
</script>

 <script type="text/javascript"> display()  </script>


 <br><input type="button" onclick="next()" value="next" ID="Button2" NAME="Button2"/>

I saw related question, but not sure that helps.. I added the next() function and the browser hangs as if it is loading something, never does. Without the next() call the display function works. I am trying to do a variation of this.

Answer 1

That related queston does help. You can't use document.write() after the document has finished loading. See the answer to that other question for how to replace document.write().