У меня есть 4 кнопки. У всех по умолчанию стоит класс "off". При клике по кнопке он сменяется на "on", если снова нажать по этой же кнопке то обратно на "off".
Проблема в следующем: Как я сказал у меня 4 кнопки и если на них все нажать то у всех класс будет'on', мне надо сделать так чтобы только одна из 4 кнопок могла быть в состоянии on, то есть та которая была нажата в данный момент включается, все остальные выключаются.
Вот как я пробовал это реализовать. Проблема моего способа в том что надо 2 раза нажать на кнопку чтобы выключилась предыдущая, мне нужно чтобы переключение происходило в 1 клик:
Красным фоном я кнопки выделил просто для наглядности
let toggleState = function (item) {
if (item.className == 'off') {
item.className = 'on';
}
else {
item.className = 'off'
}
let itemsOn = document.querySelectorAll('.on');
for (let i = 0; i < itemsOn.length; i++)
if (itemsOn.length > 1) {
itemsOn[i].className = 'off';
}
}
.on {
background-color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="button" value="1" class="off" onclick="toggleState(this)">
<input type="button" value="2" class="off" onclick="toggleState(this)">
<input type="button" value="3" class="off" onclick="toggleState(this)">
<input type="button" value="4" class="off" onclick="toggleState(this)">
<script src="js.js"></script>
</body>
</html>