1

三目並べゲームのクロム拡張を作成しています。ただし、HTML コードには、コンテンツのセキュリティのために許可されていないインライン イベント ハンドラーがあります。これらのイベント ハンドラーを JavaScript ページに転送する方法を理解する必要があります。

これは HTML ページです。インライン イベント ハンドラーはボタンにあり、関数 gamestart を呼び出します。

  <head>

  <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  <link href="game.css" rel="stylesheet" type="text/css" />

  <script type="text/javascript" src="singleplayer.js"></script>
  </head>

 <body>
 <center><u><h1>Single Player Mode</h1></u>
 <table> <tr><td>

 <button style="background-color:lightblue ; color: black" id="0" onclick = "gamestart(0)">
 </button></td>
 <td>
 <button style="background-color:lightblue ; color: black" id="1" onclick = "gamestart(1)">    
 </button>

 </td><td>

 <button style="background-color:lightblue ; color: black" id="2" onclick = "gamestart(2)">   
 </button>
 </td></tr>
 <tr><td>
 <button style="background-color:lightblue ; color: black" id="3" onclick = "gamestart(3)">   
 </button>

 </td><td>

 <button style="background-color:lightblue ; color: black" id="4" onclick = "gamestart(4)">   
 </button>

 </td><td>

 <button style="background-color:lightblue ; color: black" id="5" onclick = "gamestart(5)">
 </button>

 </td></tr><tr><td>

 <button style="background-color:lightblue ; color: black" id="6" onclick = "gamestart(6)">
 </button>

 </td><td>

 <button style="background-color:lightblue ; color: black" id="7" onclick = "gamestart(7)">
 </button>

 </td><td>

 <button style="background-color:lightblue ; color: black" id="8" onclick = "gamestart(8)">
 </button>
 </td></tr></table></center>
 </body>
 </html>

JavaScript シートでは、イベント ハンドラーを使用して呼び出される関数を次に示します。

var counter=0;
function gamestart(id){
    console.log(id);

    counter=counter+2

    if(counter%1==0){
    document.getElementById(id).innerHTML = "X";
    checkX("X");
    stopbutton("X");    
    setTimeout('player2()',500);
    checktie();
    }
}
4

2 に答える 2

1

これらの行で何かを行うことができます。

プロパティを使用addEventListenerしてイベントをアタッチし、要素をターゲットにするために使用しgetElementsByTagNameます

var elem = document.getElementsByTagName('button'),
    counter = 0;

for(var i=0;i< elem.length;i++) {
    elem[i].addEventListener('click', gamestart);
}

function gamestart(e){
   var id = this.id;
    console.log(id);

    counter=counter+2

    if(counter%1==0){
        document.getElementById(id).innerHTML = "X";
        checkX("X");
        stopbutton("X");    
        setTimeout('player2()',500);
        checktie();
}

フィドルをチェック

また、インライン スタイルを分離し、代わりにクラスに配置することをお勧めします。

.highlight {
    background-color:lightblue;
    color: black
}

ボタンのHTMLは次のようになります

 <button class="highlight" id="1">Button 1</button>

要素の構造だけを保持し、機能性とスタイリングを分離したナイス＆クリーン。

クラスに基づいて要素をターゲットにすることもできます

var elem = document.getElementsByClassName('highlight')
于 2013-07-21T23:39:38.400 に答える