Thwarted by document.write in Javascript

Question

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!

Here is the js as it currently stands:

<script>
function buildTurns() { 
    GAMELENGTH=Number(document.getElementById("NumOTurns").value);
    for (turnCount=2;turnCount<(GAMELENGTH)+1;turnCount+=1) {
        document.write("<div class='turnBox' id='Box"+(turnCount)+"'>"+(turnCount)+"     </div>")
    }; 
    if (GAMELENGTH != Math.floor(GAMELENGTH)) {
        document.getElementById("Box"+Math.ceil(GAMELENGTH)).style.background="url(images/halfturn.png) no-repeat center";}
    }
</script>

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).

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???

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.

Simply don't use it. See duplicate [What are alternatives to document.write?](http://stackoverflow.com/questions/4537963/what-are-alternatives-to-document-write) — Bergi, Feb 05 '14 at 18:09
Use [createElement](https://developer.mozilla.org/en-US/docs/Web/API/document.createElement) instead and the `appendChild` to add it to the DOM. — Matt Burland, Feb 05 '14 at 18:10

KooiInc · Accepted Answer · 2014-02-06T06:08:34.310

1

document.write opens a new DOM and that only works on page load. It's very outdated. You could rewrite your javascript to (don't forget to put the script tag at the end of the page, right before the closing </body> tag):

var GAMELENGTH = +(document.getElementById("NumOTurns").value);
for (turnCount=2;turnCount<(GAMELENGTH)+1;turnCount+=1) {
        var nwbox = document.createElement('div');
        nwbox.className = 'turnBox';
        nwbox.id = 'Box'+turnCount;
        nwbox.textContent = turnCount;
        // or nwbox.innerHTML = turnCount;
        document.body.appendChild(nwbox);
}; 
if (GAMELENGTH != Math.floor(GAMELENGTH)) { /* etc */ }

edited Feb 06 '14 at 06:08

answered Feb 05 '14 at 18:13

KooiInc

119,216
31
141
177

Thanks KooiInc - that works w/minor changes: 1) Removed var from "var GAMELENGTH" because I need a global variable 2) "document.body.appendChild(nwbox);" was causing the boxes to be drawn at bottom of the page so I changed to "document.getElementById("TrackGoesHere").appendChild(nwbox);" so they would draw where I wanted them. Still one small hiccup. If I enter "4" in NumOTurns and call the function I get the result (3 boxes drawn) I want. HOWEVER, if I realized I made a mistake and then enter "7" in NumOTurns and call the function, I then get an additional 6 boxes appended to the 3. – craig2014 Feb 05 '14 at 19:15
Is there an alternative to "append" so the 3 are replaced by the 6 instead of the 6 being added to the 3? Finally, the line "nwbox.textContent = turnCount;" doesn't work in IE8 although the rest does. All is fine in the latest FirFox and Chrome. Haven't tested any others yet. – craig2014 Feb 05 '14 at 19:17
Hi @craig2014: see edited answer for `textContent`. To replace, you could use the `replaceChild` method, see https://developer.mozilla.org/en-US/docs/Web/API/Node.replaceChild – KooiInc Feb 06 '14 at 06:11

Thwarted by document.write in Javascript

1 Answers1