Кнопки продолжают перемещаться вниз по странице каждый раз, когда содержимое внутри них меняет CSS

Я пытался создать игру «Крестики-нолики» на HTML, Javascript и CSS, но каждый раз, когда я нажимал кнопку, чтобы изменить ее содержимое, кнопка прыгала вниз по странице. Кнопки продолжают перемещаться вниз по странице каждый раз, когда содержимое внутри них меняет CSS. Вот код:

let grid = ["-", "-", "-", "-", "-", "-", "-", "-", "-"];
let clicked = [true, true, true, true, true, true, true, true, true];
let turn = 'X';
function win(player) {
  document.getElementById('ptu').innerHTML = "Player " + turn + " wins";
  for (var i = 0; i < 9; i++) {
      clicked[i] = false;
  }
}
document.getElementById('ptu').innerHTML = "Turn: X";
    
function change(button, id) {
    if (clicked[id]) {
        document.getElementById(button).innerHTML = turn;
        grid[id] = turn;

        clicked[id] = !clicked[id];
        if (turn == 'X') {
            document.getElementById('ptu').innerHTML = "Turn: O";
        } else {
            document.getElementById('ptu').innerHTML = "Turn: X"
        }

        if (grid[0] == turn && grid[1] == turn && grid[2] == turn) {
            win(turn);
        } else if (grid[0] == turn && grid[3] == turn && grid[6] == turn) {
            win(turn);
        } else if (grid[6] == turn && grid[7] == turn && grid[8] == turn) {
            win(turn);
        } else if (grid[8] == turn && grid[5] == turn && grid[2] == turn) {
            win(turn);
        } else if (grid[0] == turn && grid[4] == turn && grid[8] == turn) {
            win(turn);
        } else if (grid[2] == turn && grid[4] == turn && grid[6] == turn) {
            win(turn);
        } else if (grid[1] == turn && grid[4] == turn && grid[7] == turn) {
            win(turn);
        } else if (grid[3] == turn && grid[4] == turn && grid[5] == turn) {
            win(turn);
        }
        if (turn == 'X') {
            turn = 'O';
        } else {
            turn = 'X';
        }
    }
}

button {
                display: inline-block;
                padding: 10px 20px;
                background-color: #007bff;
                color: #fff;
                border: none;
                cursor: pointer;
                transition: background-color 0.3s;
                min-width: 50px;
                min-height: 50px;
                max-width: 50px;
                max-height: 50px;
                border-color: #000;
            }
            button:hover {
                background-color: #0056b3;
            }
            .restart {
                display: inline-block;
                padding: 10px 20px;
                background-color: #007bff;
                color: #fff;
                border: none;
                cursor: pointer;
                transition: background-color 0.3s;
                min-height: 0px;
                max-width: 100px;
                border-color: #000;
                border-radius: 12px;
            }
            html {
                font-family: sans-serif;
            }

<html>
    <head>
    </head>
    <body>   
        <button onclick = "change('1', '0')" id = "1"></button><button onclick = "change('2', '1')" id = "2"></button><button onclick = "change('3', '2')" id = "3"></button><br>
        <button onclick = "change('4', '3')" id = "4"></button><button onclick = "change('5', '4')" id = "5"></button><button onclick = "change('6', '5')" id = "6"></button><br>
        <button onclick = "change('7', '6')" id = "7"></button><button onclick = "change('8', '7')" id = "8"></button><button onclick = "change('9', '8')" id = "9"></button><br>
        <p id = "ptu"></p>
        <p id = "pwi"></p>
        <button class = "restart" onclick = "clicked = [true, true, true, true, true, true, true, true, true]; grid = ['-', '-', '-', '-', '-', '-', '-', '-', '-']; turn = 'X'; document.getElementById('1').innerHTML = ''; document.getElementById('2').innerHTML = ''; document.getElementById('3').innerHTML = ''; document.getElementById('4').innerHTML = ''; document.getElementById('5').innerHTML = ''; document.getElementById('6').innerHTML = ''; document.getElementById('7').innerHTML = ''; document.getElementById('8').innerHTML = ''; document.getElementById('9').innerHTML = ''; document.getElementById('ptu').innerHTML = 'Turn: X'; ">Restart</button>
    </body>
</html>

Код предназначен для того, чтобы кнопки просто менялись на «X» или «O».

javascript html css

21.02.2024 21:35

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Проблема в том, что ненажатые кнопки пусты. Это можно исправить, добавив неразрывный пробел к каждой кнопке в начале.

<button onclick = "change('1', '0')" id = "1">&nbsp;</button>
<button onclick = "change('2', '1')" id = "2">&nbsp;</button>
<button onclick = "change('3', '2')" id = "3">&nbsp;</button><br />
<button onclick = "change('4', '3')" id = "4">&nbsp;</button>
<button onclick = "change('5', '4')" id = "5">&nbsp;</button>
<button onclick = "change('6', '5')" id = "6">&nbsp;</button><br />
<button onclick = "change('7', '6')" id = "7">&nbsp;</button>
<button onclick = "change('8', '7')" id = "8">&nbsp;</button>
<button onclick = "change('9', '8')" id = "9">&nbsp;</button><br />

21.02.2024 22:19

Ответ принят как подходящий

Эта аномалия вызвана добавлением внутреннего HTML-контента, смещающим базовую линию выравнивания. Добавьте свойство «vertical-align: middle» в CSS кнопки, чтобы управлять ею.

21.02.2024 22:35

Другие вопросы по теме

Ошибка Flask, неверный запрос. Браузер (или прокси-сервер) отправил запрос, который этот сервер не смог понять

Адаптивный заголовок, не отображается

Как оптимизировать максимальное время отрисовки контента адаптивного изображения, заполняющего весь экран

Svelte изменить привязку: значение в событии нажатия клавиши

Bootstrap Spinner Виден при отправке

POST http://domain/wp-admin/admin-ajax.php 400 (неверный запрос)

Angular Как внедрить HttpClient в службу Angular

Как получить имя пользователя Discord из идентификатора пользователя на PHP-сайте?

Сопоставление кнопок с контроллерами в Spring Boot

Почему «поле» является допустимым именем цвета в CSS?

Кнопки продолжают перемещаться вниз по странице каждый раз, когда содержимое внутри них меняет CSS

Ответы 2

Другие вопросы по теме

Похожие вопросы