title: Thwarted by document.write in Javascript
body: <p>I have a javascript function that does a lovely job of drawing a row of boxes of a given number based on the value of a form element called NumOTurns in a specific place on a web page. But it only does this lovely job when the page loads. If I call the function (in order to change the number of boxes), then document.write rewrites the entire page -- not what I want!</p>
  
  <p>Here is the js as it currently stands:</p>
  
  <pre><code>&lt;script&gt;
  function buildTurns() { 
      GAMELENGTH=Number(document.getElementById("NumOTurns").value);
      for (turnCount=2;turnCount&lt;(GAMELENGTH)+1;turnCount+=1) {
          document.write("&lt;div class='turnBox' id='Box"+(turnCount)+"'&gt;"+(turnCount)+"     &lt;/div&gt;")
      }; 
      if (GAMELENGTH != Math.floor(GAMELENGTH)) {
          document.getElementById("Box"+Math.ceil(GAMELENGTH)).style.background="url(images/halfturn.png) no-repeat center";}
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>The default value of NumOTurns is 12 so when the page loads I get 11 boxes drawn (added to one pre-exisiting static box). But if I enter 6 into NumOTurns and call the function then document.write just overwrites the page with boxes 2-6 (sans the CSS so all you see is the numbers 2-6).</p>
  
  <p>I know document.write is the villain here. How can I achieve my goal of being able to change the number of boxes drawn after the page is loaded???</p>
  
  <p>Weird Hint: In Firefox and Firefox only, if I change the value of NumOTurns and then click FF's reload icon, I get the result I want. Doesn't happen in any other browser though.</p>