Question

我正在尝试使用这个非常简单的代码来实现简单的Javascript中的TicTacToe：

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或O.但这不起作用，因为我无法使用＆＃34;这＆＃34; kewyword检索被点击的对象属性。

我该怎么做？

非常感谢！吉安卡洛

Answer 1

你可以在这里使用闭包

检查以下代码段

        Not allowed to load local resource:

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";
  }
}

希望有所帮助

Answer 2

您可以使用作为click事件的第一个参数传递的事件对象。

event.target适用于大多数浏览器，而event.srcElement适用于几个旧的微软浏览器。

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

在由addEventListener管理的click事件中使用THIS

2 个答案: