Select multiple DIVs with same name using JavaScript
Question
I know how to select similarly named class name or ID if there are in the same direct parent, meaning if there are in the same box, proof https://codepen.io/akpobi/pen/poPddMr . But if there are more boxes and I'm trying to target all the buttons in their separate parents, it doesn't work. Help.
const btn = document.querySelector(".btn"); const box = document.querySelector(".box"); const boxInternal = document.querySelector(".box-internal").childNodes; const popFunc = function(event) { for (const boxInternals of boxInternal) { if (event.target == boxInternals) { box.classList.toggle("box-scale"); } } }; btn.addEventListener("click", popFunc, false)
<div class="box-wrapper"> <div class="box"> <div class="box-internal"> <button class="btn">Click</button> </div> </div> <div class="box"> <div class="box-internal"> <button class="btn">Click</button> </div> </div> <div class="box"> <div class="box-internal"> <button class="btn">Click</button> </div> </div> </div>
2 answers
solution1
1 2021-07-23 23:36:30
You can use .closest(".box") to get the closest enclosing box to the event target, then toggle the desired class on it:
for (const btn of document.querySelectorAll(".btn")) { btn.addEventListener("click", evt => { evt.target.closest(".box").classList.toggle("box-scale"); }); }
body { background-color: #0a0a16; color: #ffffff; margin: auto; } .box-wrapper { display: flex; position: fixed; align-items: center; justify-content: center; height: 100%; width: 100%; } .box { width: 200px; height: 120px; background-color: rgb(18, 18, 37); margin: 5px; transition: 0.6s; } .box-scale { transform: scale(1.4); }
<div class="box-wrapper"> <div class="box"> <div class="box-internal"> <button class="btn">Click</button> </div> </div> <div class="box"> <div class="box-internal"> <button class="btn">Click</button> </div> </div> <div class="box"> <div class="box-internal"> <button class="btn">Click</button> </div> </div> </div>
Alternatively, you can use event delegation in the parent element:
document.querySelector(".box-wrapper") .addEventListener("click", ({target: el}) => { el.closest(".btn") ?.closest(".box") ?.classList .toggle("box-scale") ; }) ;
body { background-color: #0a0a16; color: #ffffff; margin: auto; } .box-wrapper { display: flex; position: fixed; align-items: center; justify-content: center; height: 100%; width: 100%; } .box { width: 200px; height: 120px; background-color: rgb(18, 18, 37); margin: 5px; transition: 0.6s; } .box-scale { transform: scale(1.4); }
<div class="box-wrapper"> <div class="box"> <div class="box-internal"> <button class="btn">Click</button> </div> </div> <div class="box"> <div class="box-internal"> <button class="btn">Click</button> </div> </div> <div class="box"> <div class="box-internal"> <button class="btn">Click</button> </div> </div> </div>
If this is part of a form, you might want to disable submit with type="button" attributes on your buttons .
solution2
-1 2021-07-23 22:51:20
You need to use querySelectorAll when there are more than one element. Then iterate through them to add the event listeners.
I also used parentElement to get the element where class needs to be toggled.
let btn = document.querySelectorAll(".btn"); popFunc = function (event) { let boxInternal = event.target.parentElement; let box = boxInternal.parentElement; box.classList.toggle("box-scale"); }; for(let i=0; i<btn.length; i++){ btn[i].addEventListener("click", popFunc, false) }
body { background-color: #0a0a16; color: #ffffff; margin: auto; } .box-wrapper { display: flex; position: fixed; align-items: center; justify-content: center; height: 100%; width: 100%; } .box { width: 200px; height: 120px; background-color: rgb(18, 18, 37); margin: 5px; transition: 0.6s; } .box-scale { transform: scale(1.4); }
<body id="body" class="body"> <div class="box-wrapper"> <div class="box"> <div class="box-internal"> <button class="btn">Click</button> </div> </div> <div class="box"> <div class="box-internal"> <button class="btn">Click</button> </div> </div> <div class="box"> <div class="box-internal"> <button class="btn">Click</button> </div> </div> </div> <script src="test.js"></script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.