Создание нескольких одинаковых изображений элемента DOM
Я новый разработчик и работаю над 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")
}
}Извините, вы были правы. Это не функция. Я обновил пост
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Когда вы используете Javascript appendChild или jQuery append, когда вы передаете ему элемент, этот элемент получает удаленный из своего предыдущего местоположения в 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());
}
}
}
Не могли бы вы опубликовать больше кода, где назначается
turn? (turnдействительно функция, не похоже?)