如何使用JavaScript在父div内显示子div而不触发其他

Question

*͏͏ ͏Sorry for huge title͏͏͏ *͏

I have an issue today that I want to discuss with you guys.
I have this problem that, when I click a button "COMMENT" , it triggers JavaScript code to display a CHILD.div inside the PARENT.div , but instead it triggers the one in the upper!

Code snippet:

 function toggleHiddenDiv(id) { var div = document.getElementById(id); div.style.display = div.style.display == "block" ? "none" : "block"; } function toggleVisibleDiv(id) { var div = document.getElementById(id); div.style.display = div.style.display == "none" ? "block" : "none"; } 

 <div class="posted_post_window"> <span class="pfpicture"><img src="img/nurkiprofil.jpg" /><span class="pfname">Nurudin Imsirovic</span></span><span class="close" onclick="this.parentNode.parentNode.removeChild(this.parentNode);"></span> <div class="content">Ali je ovo smor ljudi moji...</div> <div class="react_ui"><button>LIKE</button><button>SHARE</button><button onclick="toggleHiddenDiv('submitcontainer');">COMMENT</button><button>REPORT</button></div> <div class="comments_ui"> <div class="caption">Comments</div> <div class="container"><br> <div class="pfcontainer"><img src="img/aldinprofil.jpg" alt="Profile Picture" /><span class="pfname">Aldin Hadžić</span></div> <span class="comment">Poz</span> </div> <div class="container"><br> <div class="pfcontainer"><img src="img/osmanprofil.jpg" alt="Profile Picture" /><span class="pfname">Osman Hasić</span></div> <span class="comment">Test123Test123Test123Test123Test123Test123Test123Test123Test123Tes t123Test123Test123Test123Test123Test123Test123Test123Test123Test1 23Test123Test123Test123Test123Test123Test123Test123Test123Test123Test12 3Test123Test123Test123Test123Test123Test123Test123Test123Test123Test123Tes t123Test123Test123Test123Test123Test123Test123Test123Test123Test123Test123Test 123Test123Test123Test123Test123Test123Test123Test123Test123Test123</span> </div> <div class="container"><br> <div class="pfcontainer"><img src="img/eldanprofil.jpg" alt="Profile Picture" /><span class="pfname">Eldan Delić</span></div> <span class="comment">xDDDDDD</span> </div> <div id="submitcontainer" class="submitcontainer"> <div class="pfcontainer"> <img src="img/nurkiprofil.jpg" /><span class="pfname">Nurudin Imsirovic</span> <textarea name="s.comment" rows="4"></textarea> </div> </div> </div> </div> 

So the issue for me is the

<button onclick="toggleHiddenDiv('submitcontainer');">COMMENT</button>

How can I make JavaScript only take ID's from the called PARENT.div?

As always, thanks in advance!

Answer 1

Your problem is that you're trying to target the element by its id attribute, but you have multiple elements with the same id in the document. This is illegal in HTML and you should remove those ids or make them unique. You are also using onclick attributes in your HTML this is highly inadvisable. you should be using event listeners instead, but that aside, your button clicks have no way of knowing which container was clicked or needs targeted. As it stands, you could pass a context reference to the methods and use that to tell which one should be show or hidden. Not that I've also changed the syntax for your show/hide methods. Going forward, to target an id you would use toggleHiddenDiv('#mydiv') .

 function toggleHiddenDiv(selector, context) { context = context ? context : document.body; var div = context.querySelector(selector); div.style.display = div.style.display == "block" ? "none" : "block"; } function toggleVisibleDiv(selector, context) { context = context ? context : document.body; var div = context.querySelector(selector); div.style.display = div.style.display == "none" ? "block" : "none"; } 

 <div class="posted_post_window"> <span class="pfpicture"><img src="img/nurkiprofil.jpg" /><span class="pfname">Nurudin Imsirovic</span></span><span class="close" onclick="this.parentNode.parentNode.removeChild(this.parentNode);"></span> <div class="content">Ali je ovo smor ljudi moji...</div> <div class="react_ui"><button>LIKE</button><button>SHARE</button><button onclick="toggleHiddenDiv('.submitcontainer', this.parentNode.parentNode);">COMMENT</button><button>REPORT</button></div> <div class="comments_ui"> <div class="caption">Comments</div> <div class="container"><br> <div class="pfcontainer"><img src="img/aldinprofil.jpg" alt="Profile Picture" /><span class="pfname">Aldin Hadžić</span></div> <span class="comment">Poz</span> </div> <div class="container"><br> <div class="pfcontainer"><img src="img/osmanprofil.jpg" alt="Profile Picture" /><span class="pfname">Osman Hasić</span></div> <span class="comment">Test123Test123Test123Test123Test123Test123Test123Test123Test123Tes t123Test123Test123Test123Test123Test123Test123Test123Test123Test1 23Test123Test123Test123Test123Test123Test123Test123Test123Test123Test12 3Test123Test123Test123Test123Test123Test123Test123Test123Test123Test123Tes t123Test123Test123Test123Test123Test123Test123Test123Test123Test123Test123Test 123Test123Test123Test123Test123Test123Test123Test123Test123Test123</span> </div> <div class="container"><br> <div class="pfcontainer"><img src="img/eldanprofil.jpg" alt="Profile Picture" /><span class="pfname">Eldan Delić</span></div> <span class="comment">xDDDDDD</span> </div> <div class="submitcontainer" style="display:none"> <div class="pfcontainer"> <img src="img/nurkiprofil.jpg" /><span class="pfname">Nurudin Imsirovic</span> <textarea name="s.comment" rows="4"></textarea> </div> </div> </div> </div>