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!!!

Answer 1

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.