Multiple For Statements in One Javascript

Question

Would love some help, I am newer to JavaScript and looking to do some work with for statements on one call.

function showIndividuals(param1, param2, param3, param4) {

  show_visibility(param1);
  hide_visibility(param2);

  var sCls = document.getElementsByClassName(param3);
  for (var i in sCls) {
    sCls[i].style.display = 'block';
  }


  var person = document.getElementsByClassName(param4);
  for (var i in person) {
    person[i].style.color = '#ccc';
  }

};

function hide_visibility(id) {
  var e = document.getElementById(id);
  e.style.display = 'none';
};

function show_visibility(id) {
  var e = document.getElementById(id);
  e.style.display = 'block';
};

The problem I am coming up with is that I am not sure how to run multiple for statements in one JavaScript call. Would love someone to help me understand how to do this please. Thanks!

****** ADDED ******

Here is some HTML that will help as requested

<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-5">
    <i class="fa fa-circle-o" aria-hidden="true"></i>&nbsp; Jane Johnson 
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <i class="fa fa-users blue" aria-hidden="true"></i>&nbsp; Executive Team (12)
</div>
<div class="col-sm-5 text-right">
    <div id="showindividuals"><a onclick="showIndividuals('hideindividuals','showindividuals','sigma-individuals','sigmabuttoncontainer-group')">Show Individuals</a></div>
    <div id="hideindividuals" style="display:none"><a onclick="">Hide Individuals</a></div>
</div>

<div class="col-sm-2">Header</div>
<div class="row col-sm-10">
    <div>
        <div>
            <button class="btn">A</button>
        </div>
    </div>
    <div>
        <div class="sigmabuttoncontainer-group">
            <i class="fa fa-users" aria-hidden="true"></i>
        </div>
    </div>
    <div class="sigma-individuals" style="display:none;">
        <div>
            1 - Stuff I want to show on click, there are multiple areas that use the same class within this page to show this information
        </div>
    </div>
</div>

  <div class="col-sm-2">Header 2</div>
<div class="row col-sm-10">
    <div>
        <div>
            <button class="btn">B</button>
        </div>
    </div>
    <div>
        <div class="sigmabuttoncontainer-group">
            <i class="fa fa-users" aria-hidden="true"></i>
        </div>
    </div>
    <div class="sigma-individuals" style="display:none;">
        <div>
            2 - Stuff I want to show on click, there are multiple areas that use the same class within this page to show this information
        </div>
    </div>
</div>

Answer 1

The biggest issue is that you have multiple return statements in the main function. When a return statement is encountered, the currently running function will return programmatic control back to the caller (the code that invoked the function in the first place) along with any return value that you might have specified. In your main function, anything after the first return will never be reached and the return value of sCIs is not even needed. In short, that function has no need for either return to be there.

Also, you are using for/in loops, which are meant to iterate Object structures (where there is a property name and a value), not arrays. For arrays, you can use a for loop that counts its way through the array. With true arrays, you can also use the built in .forEach() method of looping, but, since you don't technically have true arrays to loop through (you have HTML collections or "node lists" that are "array-like" objects), you can't use that, so the for loop that counts is the most appropriate choice (unless you convert your "node lists" to true arrays - - topic for another time).

Next, you are using getElementsByClassName() , which will work, but returns a "live" node list and can decrease performance if not used in the correct spots. Using querySelectorAll() performs better and accomplishes the same result, but is actually more flexible because it allows you to pass any valid CSS selector.

Here's an example of your functions in action. Check out the comments in the code for explanations of what is happening. Note that the hard-coded CSS sets #group1 div and all the .param3 div s to initially be hidden. When you click the button (and execute your functions), the display of those elements will change and the color of the last group of elements will change as well.

 function showIndividuals(param1, param2, param3, param4) { // call two other functions and pass them parameters from this funciton call show_visibility(param1); hide_visibility(param2); // Get a collection of all the elements that have the "param3" class var sCls = document.querySelectorAll(param3); // Loop through the collection (for/in loops are for objects not arrays) for (var i = 0; i < sCls.length; i++) { // As we encounter each element, change its style to display as a block element // This will do nothing when the element is already being displayed, but it will // cause the element to be rendered if it had been previously hidden sCls[i].style.display = 'block'; } // Get a collection of all the elements that have the "param4" class // Name your variables appropriately, since this will store a collection // name it with a pluralized variable. var people = document.querySelectorAll(param4); // Loop through the collection (for/in loops are for objects not arrays) for (var i = 0; i < people.length; i++) { // Change the element's foreground color people[i].style.color = '#ccc'; } }; function hide_visibility(id) { var e = document.getElementById(id); e.style.display = 'none'; }; function show_visibility(id) { var e = document.getElementById(id); e.style.display = 'block'; }; // There has to be something to trigger the functions. So in this example, we'll // do that via a button's click event // Get a reference to the button var btn = document.querySelector("button"); // Set the button's click event up to invoke your function: btn.addEventListener("click", function(){ showIndividuals("group1", "group2", ".param3", ".param4"); }); 

 /* Start the div with an id of: group1 and all the divs with a class of .param3 to be hidden: */ #group1, .param3 { display:none; } 

 <div id="group1"> <div class="param1">param 1 element</div> <div class="param1">param 1 element</div> <div class="param1">param 1 element</div> <div class="param1">param 1 element</div> </div> <div id="group2"> <div class="param2">param 2 element</div> <div class="param2">param 2 element</div> <div class="param2">param 2 element</div> <div class="param2">param 2 element</div> </div> <div class="param3">param 3 element</div> <div class="param3">param 3 element</div> <div class="param3">param 3 element</div> <div class="param3">param 3 element</div> <div class="param4">param 4 element</div> <div class="param4">param 4 element</div> <div class="param4">param 4 element</div> <div class="param4">param 4 element</div> <div><button>Click Me</button></div>