Перемещение встроенных обработчиков событий на лист javascript для расширения хрома

Я создаю хромированное расширение игры с tic tac toe. Однако в моем html-коде есть встроенные обработчики событий, которые не разрешены из-за безопасности содержимого. Мне нужно выяснить, как перенести эти обработчики событий на страницу javascript.Перемещение встроенных обработчиков событий на лист 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>

На яваскрипта листа, здесь есть функция, которая вызывается с помощью события обработчики:

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(); 
    } 
}

источник

2013-07-21 user2597417

document.onclick = function (event) { 
    if (event.target.nodeName === 'BUTTON') { 
     gamestart(event.target.id); 
    } 
}

источник

2013-07-21 23:42:02 pdoherty926

Я пробовал это и когда нажимаю кнопку, в поле появляется X, но по какой-то причине он просто останавливается там, а второй игрок не выполняет. Какие-либо предложения? – user2597417

Я понял, была ошибка в части моего кода. Вы смогли найти простое решение моей проблемы, спасибо! – user2597417

Вы можете что-то сделать в этих строках.

Используйте 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(); 
}

Check Fiddle

Кроме того, это хорошая практика, чтобы отделить ваши встроенные стили и поместить их в классе вместо ,

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

HTML И для кнопки будет выглядеть следующим образом

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

Ницца и чистой, который только держит структуру элемента, а функциональность и стиль выделившейся.

Теперь вы можете даже ориентировать элементы на основе класса

var elem = document.getElementsByClassName('highlight')

источник

2013-07-21 23:39:38

Я сделал все, что вы сказали, но по какой-то причине ваш код работает на Скрипке, но делает ничего не происходит, когда я нажимаю на кнопку, когда я фактически осуществил его. – user2597417

Открыть инструмент разработчика в chrome, нажав F12 и проверить на наличие ошибок –

Существует одна ошибка: Синтаксис непонятного доступа: Неожиданный конец ввода (он говорит, что он находится в первой строке) – user2597417

Перемещение встроенных обработчиков событий на лист javascript для расширения хрома

ответ

Смежные вопросы