受Java中document.write的挫敗

Question

我有一個javascript函數，可以根據網頁上特定位置中稱為NumOTurns的表單元素的值來繪制一排給定數量的盒子。 但是，只有在頁面加載時，它才能完成這項可愛的工作。 如果我調用該函數（以更改框數），那么document.write將重寫整個頁面-而不是我想要的！

這是目前的js：

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

NumOTurns的默認值為12，因此，在頁面加載時，我會繪制11個框（添加到一個預先存在的靜態框中）。 但是，如果我在NumOTurns中輸入6並調用該函數，那么document.write只會用2-6框覆蓋頁面（沒有CSS，所以您看到的只是數字2-6）。

我知道document.write是這里的反派。 我如何實現能夠更改頁面加載后繪制的框數的目標？？？

奇怪的提示：僅在Firefox和Firefox中，如果我更改NumOTurns的值，然后單擊FF的重新加載圖標，則會得到所需的結果。 但是不會在任何其他瀏覽器中發生。

Answer 1

document.write打開一個新的DOM，僅在頁面加載時有效。 太過時了。 您可以將javascript重寫為（不要忘記將script標記放在頁面的末尾，緊靠</body>標記的前面）：

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 */ }