1

AJAX 経由で div を更新しようとしています。私は、オンライン ブラウザー ベースの MMORPG に取り組んでいます。欲しいPHPページへの簡単なリンクとhrefを使っていたのですが、問題は履歴にあり、本当に積み重なっていました...とにかく、AXAJの方が良いという結論に達しました。私は、attack.php の結果で div を更新する際に問題が発生しました...一度だけ戦います。ボタンを 2 回クリックしても何も起こりません。私は 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";

初めてクリックしたときは問題ありませんが、2回目はこのエラーが発生し、何も起こりません...

これが私のコードです：

<!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