html - Onclick add class to 2nd child div || Javascript -
i'm trying add "on" class second child, code doesn't seem work. possible? or how possible?
i'm rookie , have tried multiple several forums , tutorials before asking 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:
this snippet features 2 functions:
turnon()function breakdown:
- it event handler registered click event on root element
<html>, yes that's dom. (document.documentelement). - get references
event.target, collect second children (document.queryselectorall('div div + div');) - selector breakdown: divs descendant of div (
div div) and has sibling positioned before (or above it, if looking @ markup). call them older brothers (div + div). - now iterate through collection of second divs , on every iteration, compare
.e.targetsecond div see if same. (if (tgt === sec) {) - when match found, add on class.
turnonall()function:
this same thing it's cousin turnon() difference being it's event.target button (all located @ top) , change second divs all @ once.
there interesting css properties in use, details commented in css. note: instead of parent being clicked, event.target second div, if prefer event.target parent still, let me know. though it's not apparent in case, making event listeners way allows delegate events plain javascript (jquery .on() except i'm not sure if can handle dynamically created elements like.on()). delegating event, can register event on parent element , able determine of it's children clicked. that's using one eventlistener.
snippet
function turnonall() { var second = document.queryselectorall('div div + div'); var qty = second.length; (let = 0; < 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; (let = 0; < 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 :before, content: attr(class) property display class if any.'; } div div:first-of-type:after { content: 'first child-pure css: :after, content, , desendant , first-of-type'; border: 2px dashed cyan; color: cyan; } div div + div:after { content: 'second child-pure css: :after, content, , desendant , 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>
Comments
Post a Comment