Как отключить эффект "нажатия" на html-кнопках
const buttons = document.querySelectorAll('button');
let playerTurn = 'X';
function runGame() {
//for(i=0; i<9; i++) {
buttons[0].addEventListener('click', function() {
buttons[0].innerHTML = playerTurn;
})
}body {
background-color: coral;
}
h1 {
font-family: 'Lobster';
font-size: 1.9rem;
text-align: center;
}
button {
width: 100px;
height: 100px;
position: relative;
left: 35px;
top: 35px;
background-color: coral;
border: none;
margin: 4px;
transition-duration: 500ms;
outline: none;
cursor: pointer;
}
button:hover {
background-color: black;
}
.game-box {
background-color: black;
width: 400px;
height: 400px;
border-radius: 10%;
margin: auto;
}
.shave-left-top {
border-top-left-radius: 10%;
}
.shave-right-top {
border-top-right-radius: 10%;
}
.shave-left-bottom {
border-bottom-left-radius: 10%;
}
.shave-right-bottom {
border-bottom-right-radius: 10%;
}<!DOCTYPE html>
<html>
<head>
<title>javaScript Tic Tac Toe</title>
<link href = "https://fonts.googleapis.com/css?family=Lobster" rel = "stylesheet">
<link rel = "stylesheet" type = "text/css" href = "style.css">
<meta charset = "utf-8">
</head>
<body>
<h1>javascript Tic Tac Toe</h1>
<div class = "game-box">
<div class = "row-1">
<input type = "button" name = ""> class = "shave-left-top" onclick = "runGame();"></button>
<button onclick = "runGame();"></button>
<button class = "shave-right-top" onclick = "runGame();"></button>
</div>
<div class = "row-2">
<button onclick = "runGame();"></button>
<button onclick = "runGame();"></button>
<button onclick = "runGame();"></button>
</div>
<div class = "row-3">
<button class = "shave-left-bottom" onclick = "runGame();"></button>
<button onclick = "runGame();"></button>
<button class = "shave-right-bottom" onclick = "runGame();"></button>
</div>
</div>
<script type = "text/javascript" src = "script2.js"></script>
</body>
</html>Я пытаюсь сделать простую игру в крестики-нолики на javascript. В настоящее время я пытаюсь нажать кнопку, чтобы изменить и отобразить ее значение, но это не работает так, как я хочу. Если вы хотите посмотреть, почему это можно сделать, не стесняйтесь, но главный вопрос связан с кнопкой. Когда по нему щелкают, он перемещается на 40 пикселей вниз, как это отключить без использования атрибута disable.
Вы рассматривали нет с использованием button? Может быть, установка слушателя на div сработает для вас ...
—
04.09.2018 07:52
О какой движущейся кнопке вы говорите?
—
04.09.2018 08:02
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
3
144
2
Ответы 2
это можно исправить, установив float left на кнопку
const buttons = document.querySelectorAll('button');
let playerTurn = 'X';
function runGame() {
//for(i=0; i<9; i++) {
buttons[0].addEventListener('click', function() {
buttons[0].innerHTML = playerTurn;
})
}body {
background-color: coral;
}
h1 {
font-family: 'Lobster';
font-size: 1.9rem;
text-align: center;
}
button {
width: 100px;
height: 100px;
position: relative;
left: 35px;
top: 35px;
background-color: coral;
border: none;
margin: 4px;
transition-duration: 500ms;
outline: none;
cursor: pointer;
float: left;
}
.row-1:after,.row-2:after,.row-3:after {
content: " ";
display: block;
clear: both;
}
button:hover {
background-color: black;
}
.game-box {
background-color: black;
width: 400px;
height: 400px;
border-radius: 10%;
margin: auto;
}
.shave-left-top {
border-top-left-radius: 10%;
}
.shave-right-top {
border-top-right-radius: 10%;
}
.shave-left-bottom {
border-bottom-left-radius: 10%;
}
.shave-right-bottom {
border-bottom-right-radius: 10%;
}<!DOCTYPE html>
<html>
<head>
<title>javaScript Tic Tac Toe</title>
<link href = "https://fonts.googleapis.com/css?family=Lobster" rel = "stylesheet">
<link rel = "stylesheet" type = "text/css" href = "style.css">
<meta charset = "utf-8">
</head>
<body>
<h1>javascript Tic Tac Toe</h1>
<div class = "game-box">
<div class = "row-1">
<input type = "button" name = ""> class = "shave-left-top" onclick = "runGame();"></button>
<button onclick = "runGame();"></button>
<button class = "shave-right-top" onclick = "runGame();"></button>
</div>
<div class = "row-2">
<button onclick = "runGame();"></button>
<button onclick = "runGame();"></button>
<button onclick = "runGame();"></button>
</div>
<div class = "row-3">
<button class = "shave-left-bottom" onclick = "runGame();"></button>
<button onclick = "runGame();"></button>
<button class = "shave-right-bottom" onclick = "runGame();"></button>
</div>
</div>
<script type = "text/javascript" src = "script2.js"></script>
</body>
</html>В CSS добавлен float: left.
Я немного изменил JavaScript. После нажатия каждой кнопки кнопки теряют свой прослушиватель щелчков, так как они не нажимаются дважды, и playerTurn поменяется местами.
const buttons = document.querySelectorAll('button');
let playerTurn = 'X';
for (i = 0; i < 9; i++) {
buttons[i].addEventListener('click', runGame, false)
}
function runGame(event){
playerTurn = playerTurn == 'X' ? 'O' : 'X';
event.target.innerHTML = playerTurn;
event.target.removeEventListener('click', runGame);
}body {
background-color: coral;
}
h1 {
font-family: 'Lobster';
font-size: 1.9rem;
text-align: center;
}
button {
width: 100px;
height: 100px;
position: relative;
background-color: coral;
border: none;
margin: 4px;
transition-duration: 500ms;
outline: none;
cursor: pointer;
float: left;
}
button:hover {
background-color: #ff6d6d;
}
.game-box {
background-color: black;
width: 325px;
height: 325px;
border-radius: 10%;
margin: auto;
padding: 35px;
}
.shave-left-top {
border-top-left-radius: 10%;
}
.shave-right-top {
border-top-right-radius: 10%;
}
.shave-left-bottom {
border-bottom-left-radius: 10%;
}
.shave-right-bottom {
border-bottom-right-radius: 10%;
} <title>javaScript Tic Tac Toe</title>
<link href = "https://fonts.googleapis.com/css?family=Lobster" rel = "stylesheet">
<link rel = "stylesheet" type = "text/css" href = "style.css">
<meta charset = "utf-8">
<h1>javascript Tic Tac Toe</h1>
<div class = "game-box">
<div class = "row-1">
<button class = "shave-left-top"></button>
<button></button>
<button class = "shave-right-top"></button>
</div>
<div class = "row-2">
<button></button>
<button></button>
<button></button>
</div>
<div class = "row-3">
<button class = "shave-left-bottom"></button>
<button></button>
<button class = "shave-right-bottom"></button>
</div>
</div>
<script type = "text/javascript" src = "script2.js"></script>
</body>
</html>Другие вопросы по теме
Как мне получить мою HTML-форму электронной почты для проверки с помощью javascript, прежде чем отправлять ее в php-скрипт для отправки
Удалить символ и заменить обратную косую черту в строке
Граница и значения не совпадают в PDF
Код iframe преобразуется в объект dom при привязке компонента Angular к шаблону HTML
Iframe, похоже, нарушает макет css
Как изменить цвет элемента списка HTML (цвет: firebrick не работает
Vue.js и Laravel - как интегрировать vue js с laravel?
Не может разместить радиокнопки вертикально посередине
Веб-страница скользит вверх, когда активна программная клавиатура
Макет меню AngularJS для настольных и мобильных устройств
Похожие вопросы
Как протестировать различные медиа-запросы для javascript
Как мне получить мою HTML-форму электронной почты для проверки с помощью javascript, прежде чем отправлять ее в php-скрипт для отправки
Разделяйте числа с помощью div
Проверка петрушки не работает после изменения значения из dom
Не может обновить свойство объекта vue внутри обратного вызова успеха axios
Экспресс-функция вызывается несколько раз
Использование компонента Vue js без веб-пакета
Остановить таймер после разъединения вызова в twilio php
Как сделать диаграмму в реальном времени с помощью anychart?
2 Условное выпадающее меню в codeigniter
Не видите "движущихся" кнопок при запуске фрагмента ..?