How to loop same javascript code for more than one div elements?

Question

I have made three "boxes" and each box contains a button. When I click the button, box hiding, when click again, box appears.

This is my html code:

<div id="SC1_A_"> <!-- BOX -->
<div id="SC1_B_" onClick="SC1();" class="something">&nbsp;</div> <!-- BUTTON -->
</div>
<div id="SC2_A_">
<div id="SC2_B_" onClick="SC2();" class="something">&nbsp;</div>
</div>
<div id="SC3_A_">
<div id="SC3_B_" onClick="SC3();" class="something">&nbsp;</div>
</div>

This is my javascript code:

<script type="text/javascript">    
function SC1(){

  var SC1_A = document.getElementById('SC1_A_);
  var SC1_B = document.getElementById('SC1_B_);

  if (SC1_A.style.display == 'block' || SC1_A.style.display == ''){
      SC1_A.className      = 'something';
      SC1_B.className      = 'something else';}   
else {SC1_A.className      = 'something else';
      SC1_B.className      = 'something';}
     }
     }
</script>

The example above works, but I have to make three similar scripts for each button. So I though to make something like this script below, using for loop. As you can imagine it didn't work. Any idea how can I make it work???

<script type="text/javascript">

for (i=1; i<10; i++){

function SCi(){

  var SCi_A = document.getElementById('SC'+i+'_A_');
  var SCi_B = document.getElementById('SC'+i+'_B_');

  if (SCi_A.style.display == 'block' || SCi_A.style.display == ''){
      SCi_A.className      = 'something';
      SCi_B.className      = 'something else';}   
else {SCi_A.className      = 'something else';
      SCi_B.className      = 'something';}
     }
     }
</script>

Please don't down-vote if you think question is too easy, but just give me your help here!!! Thank you in advance!!!

@Gary: It works now with George's example. It is closer on what my mind can understand. I can't get Lee's example!!! I can understand it's easy but for somehow I can't get it. Maybe cause I am not thinking like java's way... In other words, it is my fault lol. — DNA180
– DNA180, Commented Jan 19, 2013 at 7:51

Community · Accepted Answer · 2017-05-23 12:23:57Z

3

You're on the right track, you just need to learn the right syntax for what you are trying to express:

var SC = [];

First off, to have a lot of different functions, so instead of attempting to name them differently (which you were trying to do), we are going to just store each function in a different index in the SC array.

for (var i = 1; i < 10; i++) {
    SC[i] = (function () {
        var SC_A = document.getElementById('SC' + i + '_A_');
        var SC_B = document.getElementById('SC' + i + '_B_');

        return function () {
            if (SC_A.style.display === 'block' || SC_A.style.display === '') {
                SC_A.className = 'something';
                SC_B.className = 'something else';
            } else {
                SC_A.className = 'something else';
                SC_B.className = 'something';
            }
        }
    })();
}

Now, to call these functions you would do SC[1](), SC[2](), ... So you can either put that in each onclick in your HTML, or you could bind the events from the javascript.

Edit: I forgot to mention this because it isn't directly related to the syntax of the code, but the calls to 'document.getElementByIdwill not work until the document is fully loaded. So if you just put the script directly between to` tags it won't work. You have two choices. You either can keep the current code, but run it when the page loads. Or, you could restructure the code like this:

var SC = [];
for (var i = 1; i < 10; i++) {
    SC[i] = (function (i) {
        return function () {
            var SC_A = document.getElementById('SC' + i + '_A_');
            var SC_B = document.getElementById('SC' + i + '_B_');

            if (SC_A.style.display === 'block' || SC_A.style.display === '') {
                SC_A.className = 'something';
                SC_B.className = 'something else';
            } else {
                SC_A.className = 'something else';
                SC_B.className = 'something';
            }
        }
    })(i);
}

What's happening here is you are calling document.getElementById every time the button is clicked, instead of just once when the function is created. Slightly less efficient, but it works.

edited May 23, 2017 at 12:23

CommunityBot

11 silver badge

answered Jan 18, 2013 at 21:37

George

4,27727 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Lee Meador Over a year ago

Since 'i' is defined outside the function body, would the function use the value of 'i' at the time of the call as opposed to the value of 'i' at the time the function is defined?

George Over a year ago

@LeeMeador, moving i into the closure is unnecessary in this case because it is not used in the function that ends up being assigned to SC[i]. The function that is returned from the self-evaluating function only uses SC_A and SC_B, which are properly scoped by the self-evaluating function.

natlee75 Over a year ago

Why wouldn't you just define the function once and pass the value of i as an argument?

George Over a year ago

@natlee75 You could do away with all of the copies of the function and simply pass in i as a parameter, similar to how Lee Meador did in his answer. My answer is just closer to the OP's original idea.

Lee Meador · Accepted Answer · 2013-01-21 15:33:02Z

2

You define each section on the page as calling the one function and passing in the name of the other .

<div id="SC1_A_"> <!-- BOX -->
<div id="SC1_B_" onClick="SC('SC1_A_');" class="something">&nbsp;</div> <!-- BUTTON -->
</div>
<div id="SC2_A_">
<div id="SC2_B_" onClick="SC('SC2_A_');" class="something">&nbsp;</div>
</div>
<div id="SC3_A_">
<div id="SC3_B_" onClick="SC('SC3_A_');" class="something">&nbsp;</div>
</div>

There is just one function used for all of them

function SC(nameOfA){

   var SCi_A = document.getElementById(nameOfA);
   var SCi_B = this;

   if (SCi_A.style.display == 'block' || SCi_A.style.display == ''){
       SCi_A.className      = 'something';
       SCi_B.className      = 'something else';
   } else {
       SCi_A.className      = 'something else';
       SCi_B.className      = 'something';}
   }
}

edited Jan 21, 2013 at 15:33

answered Jan 18, 2013 at 21:38

Lee Meador

13k2 gold badges38 silver badges43 bronze badges

1 Comment

DNA180 Over a year ago

I am not saying your example is wrong, I just can't get it!!! Would you like to make it more detailed? I am talking about the first part! Thank you for your answer!!!

ncn corp · Accepted Answer · 2013-01-18 21:51:32Z

1

here you can use this function on every click:

    <div id="SC1_A_"> <!-- BOX -->
         <div id="SC1_B_" onClick="SC(event)" class="something">&nbsp;</div> <!-- BUTTON -->
    </div>
<script type="text/javascript">
    function SC(event){
        var SCA = event.currentTarget.parentNode;
        var SCB = event.currentTarget;

        ................
    }
</script>

answered Jan 18, 2013 at 21:51

ncn corp

1115 bronze badges

1 Comment

DNA180 Over a year ago

I can't understand this example :(

Erin Stanfill · Accepted Answer · 2013-01-18 21:36:04Z

0

Your code is defining a function named SCi 8 times. I think if you swap the first two lines you will get what you want.

answered Jan 18, 2013 at 21:36

Erin Stanfill

1,27811 silver badges18 bronze badges

Comments

kinsho · Accepted Answer · 2013-01-18 21:37:10Z

0

You're redefining the same function (function SCi) eight times. The only version of the function that is retained is the version that's defined last. Going by your code, you're only creating a function that can work with the 8th box.

answered Jan 18, 2013 at 21:37

kinsho

5363 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to loop same javascript code for more than one div elements?

5 Answers 5

4 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related