0

I'm building this webpage where I want some subheadings to dropdown their hidden content when clicked on.... I did manage to make them all working triggers but they don't work exactly as intended. Since each subheading and its content is contained within a SECTION tag, I decided to gather all elements with that tag by using "getElementsByTagName" in the JS file and iterate through each of them with a FOR loop, like this:

let section;

for (let i=0; i<document.getElementsByTagName('section').length; i++)
    {
        section=document.getElementsByTagName('section')[i];//This makes the "SECTION" variable become each one of the sections (which contain a subheading and a paragraph each)

        section.children[0].onclick= function()
            {//The first child element of each SECTION is the subheading, the second one is the paragraph
                if(section.children[1].style.display==='inline-block')
                    {
                        section.children[1].style.display='none';
                    }
                else
                    {
                        section.children[1].style.display='inline-block';
                    }
            }
    }

Now, the problem is that for some reason, while I can see that the "for" loop must be working since the "onclik" event is indeed taking each of the subheadings as a trigger element... I can't understand why clicking on any of the subheadings, always drops down only the content on the last SECTION, it doesn't make sense to me, help please!!

You can view all the files for the webpage here: https://github.com/SerGit-MondraHub/my-web/tree/public

And you can see it in action here: https://sergit-mondrahub.github.io/my-web/

SerGit
  • 19
  • 4
  • I would recommend using `document.querySelectorAll("section").forEach((section) => { /* your code here */ })`. That way you're only querying the DOM once and `section` is properly scoped. To answer your question though, move `let section` **inside** the loop. – Phil Jul 22 '22 at 02:38
  • you are changing value of section on every iteration, so after the for loop ends, section will be the last node of document.getElementsByTagName('section') – Chris Li Jul 22 '22 at 02:40
  • Thanks a lot guys... I moved `let section` inside the loop like @Phil suggested and it worked like a charm!! You're a life saver man, I checked out a short lesson on loops about 3 weeks ago and I know it made sense changing the scope of the variable from global to local and the other way around but now I can't remember why... would you be so kind as to explain the logic of how instructions are flowing in this particular solution as opposed to my original code? – SerGit Jul 22 '22 at 07:34
  • There's a really thorough discussion linked at the top of your post – Phil Jul 22 '22 at 07:41
  • Yeah sorry, I only started reading it after posting the comment, my bad... Anyway, regarding the other solution you suggested @Phil I remember I had tried iterating with `forEach` through `getElementsByTagName` but I couldn't make it work so I resorted to the "for" loop instead... I wonder if it was because of an error of mine or if `getElementsByTagName` just isn't meant to work with `forEach` and in that case: Why does `querySelectorAll` doesn't have that problem? – SerGit Jul 22 '22 at 08:12

0 Answers0