是否可以通过函数调用重画DIV的内容？

这里只是一个业余爱好者 - 这个应该做的就是和朋友一起玩棋盘游戏。游戏使用的塑料滑块太松而不可靠，所以我想在玩游戏时将其作为网页在智能手机上使用。是否可以通过函数调用重画DIV的内容？

它从一个窗体（在另一页上）获取一个人物的名字，并将其提供给下面的一个。根据名称，它从switch语句中选择了正确的一组属性（为简单起见，我除去了两个案例），通过for循环运行以显示列表中的属性，并将“当前”值突出显示为绿色。两个按钮应该增加或减少数组计数器（“速度”），然后重新运行用新突出显示值绘制数组的函数。 innerHTML意味着用新的结果重绘div（“speeddiv”）。

现在在Chrome中的JavaScript控制台告诉我，speedcounter（）和字符是未定义的。我怀疑这与我正在使用的函数的范围和通过innerhtml丢失的变量有关。我想要做的就是找到一种轻松重绘/替换统计计数器的方法，这样看起来突出显示的数字在div中按+或 - 按钮时会上下移动。我只在下面的“速度”属性上工作，所以我可以先让它工作。

<!DOCTYPE html> 
<html> 
<body> 
<style type="text/css"> 
html, body { height: 100%; width: 100%; margin: 0; } 
#dossier {height: 10%; text-align: center; background: #808080} 
#container {height: 90%; width: 100%; background: #000000; overflow: hidden; float: left} 
#stats {height: 100%; width: 100%; float: left; position: relative} 
#speeddiv, #mightdiv, #sanitydiv, #knowledgediv {width: 25%; height: 100%; text-align: center; float: left; position: relative; overflow: hidden} 
#speeddiv {background: #0000FF} 
#mightdiv {background: #FF0000} 
#sanitydiv {background: #FFFF00} 
#knowledgediv {background: #00FF00} 
</style> 

<?php $character = $_GET["character"]; ?> 

<script type="text/javascript"> 

var character = "<?php echo $character ?>"; 
var sp; 
var speed; 

function speedcounter() { 
    var spx; 
    document.write(' <h2>Speed</h2></br>'); 
    document.write('<input type="button" onclick="addspeed();" value="+"><br />'); 

    for (spx=8; spx>=0; spx--) { 
    if (spx == speed) { 
    document.write('<font color=#00FF00>'); 
    } 
    document.write(sp[spx]); 
    document.write('<font color=#000000><br />'); 
    } 
    document.write ('<input type="button" onclick="remspeed();" value="-">'); 
} 

function addspeed() { 
if (speed < 8) { 
    speed++; 
    document.getElementById("speeddiv").innerHTML = "<script type="text/javascript">speedcounter();<\/script>"; 
} 
} 

function remspeed() { 
if (speed > 0) { 
    speed--; 
    document.getElementById("speeddiv").innerHTML = "<script type="text/javascript">speedcounter();<\/script>"; 
} 
} 

switch (character) { 
case "brandon": 

sp=["0","3","4","4","4","5","6","7","8"]; 
mt=["0","2","3","3","4","5","6","6","7"]; 
sn=["0","3","3","3","4","5","6","7","8"]; 
kn=["0","1","3","3","5","5","6","6","7"]; 

speed=3; 
might=4; 
sanity=4; 
knowledge=3; 

break; 

case "flash": 

sp=["0","4","4","4","5","6","7","7","8"]; 
mt=["0","2","3","3","4","5","6","6","7"]; 
sn=["0","1","2","3","4","5","5","5","7"]; 
kn=["0","2","3","3","4","5","5","5","7"]; 

speed=5; 
might=3; 
sanity=3; 
knowledge=3; 

break; 
} 

</script> 

<div id="dossier"> 
<script type="text/javascript"> 
    document.write(character); 
</script> 
</div> 
<div id="container"> 
<div id="stats"> 
    <div id="speeddiv"> 
    <script type="text/javascript"> 
    speedcounter(); 
    </script> 
    </div> 
    <div id="mightdiv"> 
    <h2>Might</h2></br></br> 
    </div> 
    <div id="sanitydiv"> 
    <h2>Sanity</h2></br></br> 
    </div> 
    <div id="knowledgediv"> 
    <h2>Knowledge</h2></br></br> 
    </div> 
</div> 
</div> 

</script> 

</body> 
</html>

来源

2012-06-07 Johnny H.

我创建从您发布的http://jsfiddle.net/amelvin/bwwce/代码的jsfiddle - 它的工作在交互可能有帮助。

我认为你的问题是document.write发生了什么; the section on document.write解释说，document.write的功能不是非常可预测的。

使用像jquery这样的JavaScript库将元素插入网页而不是document.write - the html() method in jquery（其中包括）允许您动态和可预测地操作页面的任何方面，例如按钮按钮，添加或删除按钮或div的。

来源

2012-06-07 22:52:40 amelvin

感谢您的回复！我不知道jsfiddle，所以我肯定会从现在开始使用它。我也会研究jquery，但我试图尽可能保持设置为香草。再次感谢！ –

我是一个尽可能保持香草的坚定追随者，但是在今天的浏览器的JavaScript渲染器中插入jQuery例程时，您几乎可以放心，您的代码仍然很受尊重，并且可以完整地与该库进行部署。熟悉jQuery是非常明智的。即使是一个业余爱好者！ – rfoo

是否可以通过函数调用重画DIV的内容？

回答

相关问题