Проблема с отображением «X» при первом клике в игре «Крестики-нолики» ⇐ CSS

[Anonymous]

Описание:

Я работаю над игрой в крестики-нолики и столкнулся с проблемой, из-за которой знак «X» не отображается при первом щелчке на любом поле. После первого клика все работает корректно.

Подробности о проблеме:
[*]
Проблема 1: значок «X» не отображается при первом клике
Когда я нажимаю на поле в игре, знак «X» не появляется при первом щелчке. Однако последующие клики работают должным образом.
Если вы обнаружите какие-либо дополнительные проблемы в моем коде, пожалуйста, предложите мне, поскольку я новичок

Фрагменты кода:

Вот соответствующий код для моей игры в крестики-нолики:

let box = document.querySelectorAll('.boxes'); пусть arr = Array.from(boxes); console.log(обр); let pop = document.getElementById("pop"); let tossing = document.getElementById("tossing"); let tosser = document.getElementById("tosser"); let toss1 = document.getElementById("toss1"); let tossing1 = document.getElementById("tossing1"); setTimeout(() => { pop.classList.add("всплывающее окно"); }, 3000); пусть botTurn = ""; пусть selectedToss = ""; пусть счет = 0; асинхронная функция Turner() { let selected = arr[Math.floor(Math.random() * arr.length)]; setTimeout(() => { если (selected.innerHTML == "") { setTimeout(() => { selected.innerHTML = "O"; }, 50); } еще { вернуть токаря(); } }, 50); считать++; } функция тоссвиннер() { пусть поле = это; если (box.innerHTML === "") { box.innerHTML = "X"; } box.forEach((box) => { box.addEventListener("click", function() { tosswinner.call(это); }); считать++; }); } асинхронная функция FinalFunc() { let Hulk = new Promise((решить, отклонить) => { setTimeout(() => { toss1.classList.remove("open1"); решить(1); }, 2000); }); константный результат = ожидание Халка; console.log(результат); } асинхронная функция R() { let THOR = new Promise((решить, отклонить) => { setTimeout(() => { если (choosedToss == botTurn) { tossing1.innerHTML = "вы выиграли, первый ход за вами"; } еще { бросание1.innerHTML = «ты проиграл, будешь играть рядом с победителем»; } tossing1.classList.add("текст1"); решить("Тор"); }, 1500); }); константный результат = ожидание ТОРа; console.log(результат); } асинхронная функция botTurns() { let TOSS = ["Орел", "Хвост"]; botTurn = TOSS[Math.floor(Math.random() * TOSS.length)]; tossing1.innerHTML = `${botTurn`; tossing1.classList.add("текст"); } асинхронная функция Месси() { let cap = new Promise((разрешить, отклонить) => { setTimeout(() => { tossing1.classList.remove("загрузить"); ботТурнс(); решить (botTurn); }, 3000); }); константный результат = ожидание ограничения; console.log(результат); } асинхронная функция Сообщение() { let stark = new Promise((решить, отклонить) => { setTimeout(() => { tossing.classList.remove("загрузить"); tossing.innerHTML = `вы выбрали ${choosedToss} !`; solve(`вы выбрали ${choosedToss}`); }, 1000); }); константный результат = ожидание Старка; console.log(результат); } асинхронная функция popdown() { let tony = new Promise((решить, отклонить) => { setTimeout(() => { tosser.classList.remove("tosseropen"); решить("ставка"); }, 2000); }); константный результат = ожидание Тони; console.log(результат); } асинхронная функция Heads() { selectedToss = "Орел"; pop.classList.remove("всплывающее окно"); tosser.classList.add("tosseropen"); дождаться сообщения(); дождитесь всплывающего окна(); toss1.classList.add("open1"); дождаться Месси(); дождаться Р(); дождитесь FinalFunc(); } асинхронная функция Tail() { selectedToss = "Хвост"; pop.classList.remove("всплывающее окно"); tosser.classList.add("tosseropen"); дождаться сообщения(); дождитесь всплывающего окна(); toss1.classList.add("open1"); дождаться Месси(); дождаться Р(); дождитесь FinalFunc(); body { дисплей: гибкий; оправдание-содержание: центр; высота: 100вх; ширина: 100vw; выровнять-элементы: по центру; } #mainbox { ширина: 240 пикселей; высота: 240 пикселей; дисплей: гибкий; позиция: абсолютная; справа: 60 ​​пикселей; flex-flow: перенос строк; цвет фона: желтый; } .boxes { высота: 75 пикселей; ширина: 75 пикселей; фон: красный; поле: 2 пикселя; белый цвет; размер шрифта: 25 пикселей; } #поп, #тоссер, #toss1 { высота: 200 пикселей; ширина: 280 пикселей; фон: небесно-голубой; позиция: абсолютная; верх: 0%; слева: 12,5%; видимость: скрыта; преобразование: трансляция (0 пикселей, 0 пикселей) масштаб (0,01); переход: преобразование 0,4 с, верх 0,4 с; дисплей: гибкий; flex-flow: перенос столбца; радиус границы: 20 пикселей; оправдание-содержание: пространство между; выровнять-элементы: по центру; } #pop.popup, #tosser.tosseropen, #toss1.open1 { видимость: видимая; дисплей: гибкий; верх: 0%; трансформировать: транслировать(0px, 100px) масштаб(1); } .голова { ширина: 280 пикселей; высота: 50 пикселей; фон: темно-синий; белый цвет; размер шрифта: 30 пикселей; дисплей: гибкий; оправдание-содержание: центр; выровнять-элементы: по центру; шрифт-вес: жирнее; граница-верхний левый радиус: 20 пикселей; граница-верхний-правый-радиус: 20 пикселей; } #пара { дисплей: гибкий; оправдание-содержание: центр; выровнять-элементы: по центру; размер шрифта: 20 пикселей; белый цвет; начертание шрифта: жирный; } .бросать { высота: 40 пикселей; ширина: 90 пикселей; поле: 0 пикселей 20 пикселей 30 пикселей 18 пикселей; фон: королевский синий; белый цвет; размер шрифта: 20 пикселей; граница: нет; радиус границы: 10 пикселей; начертание шрифта: жирный; } #подбрасывание { белый цвет; размер шрифта: 27 пикселей; шрифт-вес: жирнее; поле внизу: 60 пикселей; } .текст { белый цвет; размер шрифта: 15 пикселей; шрифт-вес: жирнее; поле внизу: 38 пикселей; } .текст 1 { белый цвет; размер шрифта: 15 пикселей; шрифт-вес: жирнее; поле внизу: 65 пикселей; } .нагрузка { высота: 50 пикселей; ширина: 50 пикселей; граница: сплошная черная 5 пикселей; border-top: 5 пикселей royalblue сплошной; граница-радиус: 50%; положение: фиксированное; верх: 80 пикселей; анимация: SpinAnimate 1 с линейная 0 с бесконечная нормальная; } @keyframes SpinAnimate { от { преобразование: поворот (0 градусов); } к { преобразование: поворот (360 градусов); } ТОСС Орёл или решка?
ГОЛОВЫ TAIL ВЫБРАН БРОСКИ

С уважением

Спасибо, если вы только попытались решить мою проблему

Что я пробовал:

Я проверил код функций Turner и Tosswinner, предложенный экспертом по платформе OpenAI. Я убедился, что правильно вызываю функцию tosswinner при щелчке по коробке.

Дополнительная информация:

Для создания этой игры я использую HTML, CSS и JavaScript. Я подозреваю, что может возникнуть конфликт в обработке событий или проблема с синхронизацией, но я не могу точно определить причину проблемы.

Просьба о помощи:

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

Спасибо за помощь!