Создание нескольких одинаковых изображений элемента DOM

Question

Я новый разработчик и работаю над Tic Tac Toe SPA.У меня есть рабочая игра, но я хочу настроить жетоны игры.Я попытался создать элемент DOM несколькими разными способами, которые все были успешными.Вот проблема:

Каждый раз, когда я делаю второй ход для игрока, изображение DOM исчезает и снова появляется в новом выбранном квадрате.Очевидно, это не желаемое действие.Есть ли что-то, чего я не знаю о создании элемента DOM.Я прогуглил это, прочитал бесчисленные статьи и посмотрел бесчисленное количество видео.

const stark = document.createElement('img')
  stark.src = 'https://i.imgur.com/d70XlET.png'
  stark.height = 80
  stark.width = 80

const lanister = document.createElement('img')
  lanister.src = 'https://i.imgur.com/d70XlET.png'
  lanister.height = 80
  lanister.width = 80

const play = (event) => {
  if (gameOver === false) {
    if (event.target.innerHTML === '') {
      $('#' + event.target.id).append(turn)
    }
  }
}

'turn' - это переменная, которая работает с функцией переключения для переключения между игроками и хранит их независимо от того, кто из игроков поворачивает (т. Е. 'Stark')

Я был бы очень признателен, если бы кто-то мог указать мне направление, где я мог бы узнать больше об этом

const player1 = stark
const player2 = lanister

let turn = player1
let prevTurn = player2

const togglePrevTurn = () => {
  if (!gameOver) {
    if (prevTurn === player1) {
      prevTurn = player2
    } else {
      prevTurn = player1
    }
  }
}

const toggleTurn = () => {
  if (!gameOver) {
    if (turn === player1) {
      turn = player2
    } else {
      turn = player1
    }
    $('#message').text(turn + " 's turn")
  }
}

Answer 1

Когда вы используете appendChild Javascript или append jQuery, когда вы передаете ему элемент, этот элемент получает удаленный из своего предыдущего местоположения в DOM (если он находится в DOM), и , затем вставляется в новую позицию.Похоже, вам нужно каждый раз явно создавать новый элемент, что вы можете делать с cloneNode().

Кроме того, возможно, лучше всего точно назвать ваши переменные - если turn - это изображение,назовите его, чтобы было ясно, что это изображение, возможно currentPlayerImage.

Кроме того, поскольку у вас уже есть ссылка на event.target, нет необходимости повторно выбирать его с помощью $('#' + event.target.id) - просто выберитеevent.target:

const play = (event) => {
  if (gameOver === false) {
    if (event.target.innerHTML === '') {
      $(event.target).append(currentPlayerImage.cloneNode());
    }
  }
}