1

我正在尝试通过 AJAX 更新 div。我正在开发基于在线浏览器的 MMORPG。我使用简单的链接和 href 指向我想要的 PHP 页面，但问题出在历史上，它真的堆积如山……所以无论如何，我得出的结论是 AXAJ 更好。我，用 attack.php 结果更新我的 div 时遇到问题......它只打了一次。我第二次单击该按钮，但没有任何反应。我使用了 Web Developer Web Console，我得到了这个

[14:47:51.167] TypeError: document.getElementById(...) is null @stickmaniagame.com/test/indexajaxtest.php:40

在我的 indexajaxtest.php 第 40 行是

    document.getElementById("gif").style.visibility="visible";

我第一次点击没有问题，但第二次我得到这个错误，没有任何反应......

这是我的代码：

<!DOCTYPE html>
<html>
<head>
<?  include('includes/config.php');
?>
<script type="text/javascript">
var creatureId;
var i;
function attack(creatureId)
{
    document.getElementById("gif").style.visibility="";
    document.getElementById("gif").src="images/anim.gif";
    document.getElementById("attackbtn").style.visibility="hidden";
    setTimeout(function(){myTimer(creatureId)},2000);
}

function myTimer(creatureId)
{
    var x=document.getElementById("mySelect");
    var xmlhttp;
    document.getElementById("gif").style.visibility="hidden";
    document.getElementById("img").innerHTML="";
    document.getElementById("attackbtn").style.visibility="";

    if (window.XMLHttpRequest)
      {xmlhttp=new XMLHttpRequest(); }
    else
      {xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}

    xmlhttp.onreadystatechange=function()
      {  if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("battle").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET","attack.php?creature="+creatureId,true);
    xmlhttp.send();
}

function attack2()
{
    document.getElementById("gif").style.visibility="visible";
    document.getElementById("gif").src="images/anim.gif";
    document.getElementById("attackbtn").style.visibility="hidden";
    setTimeout(function(){battle()},2000);
}

function battle()
{
    var x=document.getElementById("mySelect");
    var xmlhttp;
    document.getElementById("gif").style.visibility="hidden";
    document.getElementById("img").innerHTML="";
    document.getElementById("attackbtn").style.visibility="";

    if (window.XMLHttpRequest)
      {xmlhttp=new XMLHttpRequest(); }
    else
      {xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}

    xmlhttp.onreadystatechange=function()
      {  if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("battle").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET","click.html",true);
    xmlhttp.send();
}
function reply_click(clicked_id)
{
    creatureId=clicked_id;
    myTimer(creatureId);
}
</script>
</head>
<body>

<h1>Attack</h1>
<div id="img"><img id="gif" style="visibility:hidden"></div>
<div id="battle" style="visibility:visible;"></div>
<input id="attackbtn" name="attackbtn" type="image" src="/test/images/attack.jpg" value="Attack" onclick="attack2()" />
<form>
<div onClick="if(document.getElementById('creatures').style.visibility=='visible')
                {document.getElementById('creatures').style.visibility='hidden';}
                else{document.getElementById('creatures').style.visibility='visible';}">
Creatures:
</div>
<div id="creatures" style="visibility:collapse;">
  <?
  $creatures = mysql_query("SELECT id, name FROM creatures ORDER BY level DESC limit 5");
while($row = mysql_fetch_array($creatures))
  {
      ?>
  <div id="<? echo $row['id']; ?>" style="margin-left:100px;" onClick="reply_click(this.id);">
  <img src="images/monster.jpg" height="30px" /><? echo $row['name']; ?>
</div>
<? } ?>
</div>
<input type="button" onclick="attack2()" value="Alert index of selected option">
</form>
</body>
</html>

顺便说一句，测试帐户的登录信息是：
用户名：测试
密码：1234

链接：

登录！重要的！www.stickmaniagame.com
http://stickmaniagame.com/test/indexajaxtest.php 问题文件...

4

0 回答 0