我有一个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是这里的恶棍。如何实现在加载页面后更改绘制的框数的目标?
奇怪的提示:仅在火狐和火狐中,如果我更改了NumOTurns的值,然后单击FF的重新加载图标,我就会得到我想要的结果。但在任何其他浏览器中都不会发生。
发布于 2014-02-05 18:13:29
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 */ }
https://stackoverflow.com/questions/21585022
复制相似问题