Having a single button selected at a time works as it's supposed to, but when a button is clicked, it won't deselect when it's clicked again.
I feel like the solution to this is very simple but I can't figure it out.
<div id="buttonWrapper">
<button class="buttonArray"></button>
<button class="buttonArray"></button>
<button class="buttonArray"></button>
<button class="buttonArray"></button>
<button class="buttonArray"></button>
</div>
<script type="text/javascript">
const buttonElement = document.getElementById('buttonWrapper');
buttonElement.addEventListener('click', function (e) {
document.querySelectorAll('#buttonWrapper button').forEach(function (el) {
el.className = "buttonArray";});
if (e.target.className === "buttonArray") {
e.target.className = "buttonSelect";
}
else {
e.target.className = "buttonArray";
}
});
https://jsfiddle.net/cg6n5ahd/
What's the easiest way to solve this with my code? Thanks in advance.
So I found out that the way I wanted to do this was actually not possible at all so I had to completely redo it to this technique without CSS. Deselecting even with radios was pretty awkward too as they aren't really designed to be deselected either except for work arounds like this one.
function deselectRadio(rootElement) {
if (!rootElement) rootElement = document;
if (!window.radioChecked) window.radioChecked = {};
window.radioClick = function(e) {
const obj = e.target,
name = obj.name || "unnamed";
if (e.keyCode) return obj.checked = e.keyCode != 32;
obj.checked = window.radioChecked[name] != obj;
window.radioChecked[name] = obj.checked ? obj : null;
}
rootElement.querySelectorAll("input[type='radio']").forEach(radio => {
radio.setAttribute("onclick", "radioClick(event)");
radio.setAttribute("onkeyup", "radioClick(event)");
});
}
deselectRadio();<div id="buttonWrapper">
<input type="radio" name="tabRadio" id="radio1" />
<input type="radio" name="tabRadio" id="radio2" />
<input type="radio" name="tabRadio" id="radio3" />
<input type="radio" name="tabRadio" id="radio4" />
<input type="radio" name="tabRadio" id="radio5" />
</div>const buttonElement = document.getElementById('buttonWrapper');
buttonElement.addEventListener('click', function(e) {
document.querySelectorAll('#buttonWrapper button').forEach(function(el) {
e.target.className = e.target.className == 'buttonArray' ? 'buttonSelect' : 'buttonArray';
});
});body {
color: #000;
background: #eee;
}
.buttonArray {
border-color: darkgray;
border-style: solid;
border-radius: 10px;
padding: 10px;
}
.buttonArray:hover {
border-color: #a0a0a0;
background-color: #dbdbdb;
}
.buttonSelect {
border-color: goldenrod;
background-color: gold;
border-style: solid;
border-radius: 10px;
padding: 10px;
}
#buttonWrapper {
flex-direction: row;
padding: 10px;
top: 1rem;
left: 0%;
width: 100%;
float: left;
box-sizing: border-box;
text-align: center;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
z-index: 1;
background: transparent;
} <div id="buttonWrapper">
<button class="buttonArray"></button>
<button class="buttonArray"></button>
<button class="buttonArray"></button>
<button class="buttonArray"></button>
<button class="buttonArray"></button>
</div>