Использования ЭТОГО внутри события мыши управляется addEventListener

Question

Я пытаюсь это очень простой кодом для реализации TicTacToe в простом Javascript:

function inizializza() 
    { 
    var x = document.querySelectorAll(".riga div"); 
    var i; 
    for (i = 0; i < x.length; i++) { 
    document.querySelectorAll(".riga div")[i].addEventListener("click", 
    cambia); 
    } 

    } 

var segno = "X"; 

function cambia() 
{ 
if (this.innerHTML != "") 
    { 
    alert("ERRORE!") 
    } 
else 
    { 
    this.innerHTML = segno; 
    if (segno == "X") 
    segno = "O"; 
    else 
    segno = "X"; 
    } 
} 

Функция inizializza() вызываются при загрузке тела.

Когда вы нажимаете на .riga div (ячейку в моей игровой таблице), клик события должен изменить текст, отображаемый в ячейке: X или О. Но это не работает, потому что я не могу использовать " это «ключевое слово для извлечения свойств объекта щелчка.

Как я могу это сделать?

Большое спасибо! Giancarlo

Answer 1

вы можете использовать укупорочные здесь

проверка следующего фрагмент

window.onload = function() { 
 
    inizializza(); 
 
} 
 

 
function inizializza() { 
 
    var x = document.querySelectorAll(".riga div"); 
 
    var i; 
 
    for (i = 0; i < x.length; i++) { 
 
    document.querySelectorAll(".riga div")[i].addEventListener("click",function(event){ 
 
     cambia(this); 
 
    }); 
 
    } 
 

 
} 
 

 
var segno = "X"; 
 

 
function cambia(obj) { 
 
    if (obj.innerHTML == "") { 
 
    alert("ERRORE!") 
 
    } else { 
 
    obj.innerHTML = segno; 
 
    if (segno == "X") 
 
     segno = "O"; 
 
    else 
 
     segno = "X"; 
 
    } 
 
}

<div class="riga"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
    <div>X</div> 
 

 
</div>

Надеется, что это помогает

Answer 2

Вы можете использовать объект события, передаваемый в качестве первого аргумента события click.

event.target будет работать для большей части браузера, а event.srcElement работает с несколькими старыми браузерами microsoft.

function inizializza() 
{ 
    var x = document.querySelectorAll(".riga div"); 
    console.log(x); 
    var i; 
    for (i = 0; i < x.length; i++) { 
    document.querySelectorAll(".riga div")[i].addEventListener("click", 
    cambia); 
    } 
} 

var segno = "X"; 

function cambia(event) 
{ 

    var element = event.target || event.srcElement; 

    if (target.innerHTML !== "") 
    { 
    alert("ERRORE!") 
    } 
    else 
    { 
    this.innerHTML = segno; 
    if (segno == "X") 
    segno = "O"; 
    else 
    segno = "X"; 
    } 
} 

Рабочий пример: https://plnkr.co/edit/NaTwU7XmmU9sLgNiFrjO?p=preview