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（不要忘记将脚本标记放在页面的末尾，就在结束</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 */ }

被Javascript中的document.write所阻挠

1 个答案: