Your scripting can be hugely simplified using event delegation. First remove the active-class from the buttons within the containing div, next add the active-class to the clicked button. No need for jQuery, I’d say.
document.addEventListener("click", handleBttns);
// ^ one handler (event delegation)
function handleBttns(evt) {
const origin = evt.target;
if (origin.className.startsWith("btn")) {
origin.closest("div").querySelectorAll("button.active")
// ^ the closest div of the clicked button
.forEach(btn => btn.classList.remove("active"));
// remove .active from all buttons within the div
return origin.classList.add("active");
// add .active to the clicked button
}
// reset all
if (origin.id === "reset") {
document.querySelectorAll("button.active")
.forEach(btn => btn.classList.remove("active"));
document.querySelectorAll("div > button:first-child")
.forEach(btn => btn.classList.add("active"));
}
}
.active {
background-color: #666;
color: white;
}
[id^=myDIV] > button:not(.active):hover {
color: orange;
background-color: #666;
}
id: myDIV1, class: btn1
<div id="myDIV1">
<button class="btn1 active">1</button>
<button class="btn1">2</button>
<button class="btn1">3</button>
</div><br> id: myDIV2, class: btn2
<div id="myDIV2">
<button class="btn2 active">1</button>
<button class="btn2">2</button>
<button class="btn2">3</button>
</div><br> id: myDIV3, class: btn3
<div id="myDIV3">
<button class="btn3 active">1</button>
<button class="btn3">2</button>
<button class="btn3">3</button>
</div>
<p>
<button id="reset">Reset all</button>
</p>
Since you have taged it with jquery I will provide a jquery solution.
$('div[id^=myDIV] button').click(function() {
$(this).siblings().removeClass("active");
$(this).addClass("active");
});
Demo
$('div[id^=myDIV] button').click(function() {
$(this).siblings().removeClass("active");
$(this).addClass("active");
});
.active,
.btn:hover {
background-color: #666;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
id: myDIV1, class: btn1
<div id="myDIV1">
<button class="btn1 active">1</button>
<button class="btn1">2</button>
<button class="btn1">3</button>
</div><br> id: myDIV2, class: btn2
<div id="myDIV2">
<button class="btn2 active">1</button>
<button class="btn2">2</button>
<button class="btn2">3</button>
</div><br> id: myDIV3, class: btn3
<div id="myDIV3">
<button class="btn3 active">1</button>
<button class="btn3">2</button>
<button class="btn3">3</button>
</div>
You can get class where button is clicked and then remove active from other button with same class.
Demo Code:
$("button").on('click', function() {
var classs = $(this).attr('class') //get class
$(this).addClass("active"); //add active
$("." + classs).not(this).removeClass('active') //remove active clas from others
})
.active,
.btn:hover {
background-color: #666;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
id: myDIV1, class: btn1
<div id="myDIV1">
<button class="btn1 active">1</button>
<button class="btn1">2</button>
<button class="btn1">3</button>
</div><br> id: myDIV2, class: btn2
<div id="myDIV2">
<button class="btn2 active">1</button>
<button class="btn2">2</button>
<button class="btn2">3</button>
</div><br> id: myDIV3, class: btn3
<div id="myDIV3">
<button class="btn3 active">1</button>
<button class="btn3">2</button>
<button class="btn3">3</button>
</div>
Here is an example of setting active class to selected element. This is a nice example, but there is a problem. In the example there is a single ID and its child class, so I tried adding multiple IDs and setting different classes respectively, in order to have only one button selected for each ID DIV.
So I wrote this code; here I wrote three chunks of script – yes it looks long, but they are in fact just identical chunks with different ID and class.
var header = document.getElementById("myDIV1");
var btns = header.getElementsByClassName("btn1");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
var header = document.getElementById("myDIV2");
var btns = header.getElementsByClassName("btn2");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
var header = document.getElementById("myDIV3");
var btns = header.getElementsByClassName("btn3");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
.active, .btn:hover {
background-color: #666;
color: white;
}
id: myDIV1, class: btn1
<div id="myDIV1">
<button class="btn1 active">1</button>
<button class="btn1">2</button>
<button class="btn1">3</button>
</div><br>
id: myDIV2, class: btn2
<div id="myDIV2">
<button class="btn2 active">1</button>
<button class="btn2">2</button>
<button class="btn2">3</button>
</div><br>
id: myDIV3, class: btn3
<div id="myDIV3">
<button class="btn3 active">1</button>
<button class="btn3">2</button>
<button class="btn3">3</button>
</div>
So how can I make only one button ‘active’d per each DIV(like the former image), instead of showing results like the latter image?
Hi @Swati. I’m not very skilled, but I can try.
Thank you, I accepted your answer. One question though, is there any way to reset the css setings back to how it was before clicking (retreating class name ‘active’ back to buttons number 1) through javascript function? I tried doing this myself for some time but because of not being familiar with this format I couldn’t think of a way.
You mean something like “undo” for all button blocks or per block? Added some code for the first to the answer
