1

我正在创建井字游戏的 chrome 扩展。但是，我的 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 回答
1 
document.onclick = function (event) {
    if (event.target.nodeName === 'BUTTON') {
        gamestart(event.target.id);
    }
}
于 2013-07-21T23:42:02.407 回答