首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >document.write在Javascript中的阻挠

document.write在Javascript中的阻挠
EN

Stack Overflow用户
提问于 2014-02-05 18:06:12
回答 1查看 69关注 0票数 0

我有一个javascript函数,它可以很好地根据一个名为NumOTurns的表单元素在网页上的特定位置绘制给定数字的一行框。但只有当页面加载时,它才能完成这一可爱的工作。如果我调用这个函数(为了改变框数),那么document.write重写了整个页面--这不是我想要的!

以下是目前的js:

代码语言:javascript
运行
复制
<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是这里的恶棍。如何实现在加载页面后更改绘制的框数的目标?

奇怪的提示:仅在火狐和火狐中,如果我更改了NumOTurns的值,然后单击FF的重新加载图标,我就会得到我想要的结果。但在任何其他浏览器中都不会发生。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-02-05 18:13:29

document.write打开一个新的DOM,它只在页面加载时工作。太过时了。您可以重写您的javascript (不要忘记将脚本标记放在页面的末尾,就在关闭的</body>标记之前):

代码语言:javascript
运行
复制
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 */ }
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/21585022

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档