Onclick add class to 2nd child div || Javascript
Question
I'm trying to add the "on" class to the second child, but my code doesn't seem to work. Is it possible? Or how is it possible?
I'm a rookie and have tried multiple several forums and tutorials before asking this question.
HTML
<!--PARENT-->
<div class="element" id="elem1" onclick="addClass()">
<!--FIRST CHILD-->
<div>
</div>
<!--SECOND CHILD-->
<div>
</div>
</div>
<!--PARENT-->
<div class="element" id="elem2" onclick="addClass()">
<!--FIRST CHILD-->
<div>
</div>
<!--SECOND CHILD-->
<div>
</div>
</div>
<!--PARENT-->
<div class="element" id="elem3" onclick="addClass()">
<!--FIRST CHILD-->
<div>
</div>
<!--SECOND CHILD-->
<div>
</div>
</div>
CSS
element{
display:none;
}
on{
display:initial;
}
Javascript
function addClass(){
var element= document.getElementsByClassName("element").children;
element[1].classList.add('on');
element[1].value ="on";
}
CODEPEN:
2 answers
solution1
1 2016-11-17 17:13:12
You can use something like this, fetch all the elements add "on" class to the second child of each element
var element= document.querySelectorAll(".element");
for(var i=0; i < element.length; i++){
element[i].children[1].classList.add('on');
element[i].children[1].value ="on";
}
solution2
1 ACCPTED 2016-11-17 19:07:12
This Snippet features two functions:
turnOn()function breakdown:
- It is an event handler registered to the click event on the root element
<html>, yes that's everything DOM. (document.documentElement). - Get references to the
event.targetand collect all second children (document.querySelectorAll('div div + div');) - Selector breakdown: Get the divs that are a descendant of a div (
div div) and has a sibling the is positioned before it (or above it, if looking at the markup). I call them older brothers (div + div). - Now iterate through the collection of second divs and on every iteration, compare
.e.targetwith a second div to see if they are the same. (if (tgt === sec) {) - When a match is found, add the on class.
turnOnAll()function:
This does the same thing as it's cousin turnOn() the difference being that it's event.target is a button ( ALL located at the top) and it will change second divs all at once .
There are some interesting CSS properties in use, details are commented in the CSS. Note: Instead of the parent being clicked, the event.target is the second div, if you prefer the event.target to be the parent still, let me know. Even though it's not very apparent in this case, making event listeners that way allows you to delegate events with plain JavaScript (jQuery .on() except I'm not sure if it can handle dynamically created elements like .on() ). By delegating an event, you can register an event on a parent element and be able to determine which of it's children were clicked. That's just using one eventListener .
Snippet
function turnOnAll() { var second = document.querySelectorAll('div div + div'); var qty = second.length; for (let i = 0; i < qty; i++) { second[i].classList.add('on'); } } document.documentElement.addEventListener('click', turnOn, false); function turnOn(e) { var tgt = e.target; var second = document.querySelectorAll('div div + div'); var qty = second.length; for (let i = 0; i < qty; i++) { var sec = second[i]; if (tgt === sec) { sec.classList.add('on'); } } }
div { height: 35px; margin: 10px auto; cursor: pointer; } div:before { content: attr(class); color: gold; font-size: 20px; } div.element { background: rgba(0, 0, 0, .5); height: 180px; color: white; } div.element:after { content: 'Parent-Pure CSS: Each div has a :before, content: attr(class) property which will display the class if any.'; } div div:first-of-type:after { content: 'First Child-Pure CSS: :after, content, and desendant and first-of-type'; border: 2px dashed cyan; color: cyan; } div div + div:after { content: 'Second Child-Pure CSS: :after, content, and desendant and sibling selector'; border: 2px dashed red; color: red; } .as-console-wrapper { height: 80%; background: rgba(0, 0, 0, .7); } button { width: 50px; height: 25px; }
<button onclick='turnOnAll()'>ALL</button> <!--PARENT--> <div class="element" id="elem1"> <!--FIRST CHILD--> <div> </div> <!--SECOND CHILD--> <div> </div> </div> <!--PARENT--> <div class="element" id="elem2"> <!--FIRST CHILD--> <div> </div> <!--SECOND CHILD--> <div> </div> </div> <!--PARENT--> <div class="element" id="elem3"> <!--FIRST CHILD--> <div> </div> <!--SECOND CHILD--> <div> </div> </div>
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.