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? — Bergi
– Bergi, Commented Feb 5, 2014 at 18:09
Use createElement instead and the appendChild to add it to the DOM. — Matt Burland
– Matt Burland, Commented Feb 5, 2014 at 18:10

KooiInc · Accepted Answer · 2014-02-06 06:08:34Z

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 6, 2014 at 6:08

answered Feb 5, 2014 at 18:13

KooiInc

123k32 gold badges145 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

craig2014 Over a year ago

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 Over a year ago

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.

KooiInc Over a year ago

Hi @craig2014: see edited answer for textContent. To replace, you could use the replaceChild method, see developer.mozilla.org/en-US/docs/Web/API/Node.replaceChild

Collectives™ on Stack Overflow

Thwarted by document.write in Javascript

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related