Новый дочерний элемент содержит родителя

Question

Я пытаюсь сделать игру Tic-Tac-Toe, и у меня возникают проблемы при изменении фонового изображения на изображение X или О. Я беру идентификатор ячейки <td> с прослушиватель событий нажимает на мою ячейку <td>.

Это создание таблицы со всеми идентифицированными ячейками и изображениями, включенными во все ячейки с разными идентификаторами. функция

function BuildTable(rows, cols) { 
    BuildDivJeu(); 
    var table = document.createElement("TABLE"); 
    table.id = "Table"; 
    document.getElementById("Jeu").appendChild(table); 
    for (var row = 1; row <= rows; row++) { 
     var rangee = document.createElement("TR"); 
     rangee.id = row; 
     document.getElementById("Table").appendChild(rangee); 
     for (var col = 1; col <= cols; col++) { 
      var cellule = document.createElement("TD"); 
      var img = document.createElement("IMG"); 
      cellule.id = "R" + row + "C" + col; 
      img.setAttribute("id", cellule.id); 
      img.setAttribute("src", "Images/VN.png"); 
      img.setAttribute("alt", "VN") 

      cellule.appendChild(img); 
      document.getElementById(row).appendChild(cellule); 
      cellule.addEventListener("click", Jouer); 
     } 
    } 
} 

Это моя функция, которая изменяет изображения в ячейку в зависимости от щелчка ячейки.

function Jouer() { 
    var x = event.currentTarget 
    var id = x.id; 
    var imgx = document.getElementById(id); 
    var imgo = document.getElementById(id); 
    if (turn % 2 == 0) { 
     if (x.alt != "VN" | x.alt != "ON") { 
      if (imgx.hasAttribute("alt")) { 
       imgx.setAttribute("src", "Images/XN.png"); 
       imgx.setAttribute("id", "XN"); 
       imgx.setAttribute("alt", "XN"); 
      } 
      x.appendChild(imgx); 
     } 
     turn++; 
    } else { 
     if (x.id != "VN" | x.id != "XN") { 
      if (imgo.hasAttribute("alt")) { 
       imgo.setAttribute("src", "Images/ON.png"); 
       imgo.setAttribute("id", "ON"); 
       imgo.setAttribute("alt", "ON"); 
      } 
      x.appendChild(imgo); 
     } 
     turn++; 
    } 
} 

Когда я нажимаю на ячейке, которую я хочу поставить свою X или O он не работает с сообщением об ошибке в качестве названия этого горшка упоминания. Интересно, как я мог приступить к изменению изображения в ячейке с их новыми идентификаторами.

Answer 1

Ваша логика в Jouer() имеет недостатки. Я не знаю точно, что вы пытаетесь сделать, когда вы нажимаете на ячейку, но вот что вы на самом деле делаете и почему вы получаете эту ошибку.

Часть проблемы заключается в том, что вы назначаете как <td>, так и <img> точный идентификатор. Вы не можете этого сделать. Значения идентификатора должны быть уникальными в документе. Когда вы вызываете document.getElementById(id), он скорее всего вернет только первый объект, соответствующий этому id (хотя, поскольку это нелегальный синтаксис HTML, точное поведение не определяется спецификацией).

Кроме того, вот что первая часть Jouer() делает:

Затем, позже в этой функции, вы пытаетесь сделать это:

x.appendChild(imgx); 

Но, x и imgx являются тот же элемент. Вы не можете добавить элемент к себе. Само сообщение об ошибке несколько запутывается, поскольку в нем говорится: «Новый дочерний элемент содержит родительский элемент», но то, что они, вероятно, проверяют в коде, заключается в том, что новый родитель находится где-нибудь в дочерней иерархии, что сделало бы это незаконной операцией, и это превратится он находится вверху или иерархии и, таким образом, вы получаете это сообщение об ошибке.

---

Если вы заботитесь объяснить словами, именно то, что вы хотите, чтобы произошло после клика, то я, вероятно, может предложить код, который будет делать это.