Apply a JavaScript function to all Array elements except the ith element

Question

In one of my projects I made 3 galleries, I would like to put both of them on the same page in the same position, not at the same time, however. For this to be possible, I chose to create 3 buttons. When I click on the first button for example, the first gallery should appear (both galleries are initially on display:none), then when I click on the second button, the second one should appear and the one shown before should disappear, and so for each of the galleries. I made a simplified copy of the page to make the thinking easier.

In general, my problem is that I don't quite know how to apply a function to all the elements in an Array except for one element.

Here is the code:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Galleries</title>
 <link rel="stylesheet" type="text/css" href="gs.css">
 <style type="text/css">
  body{
   background-color:royalblue;
  }
  header{
   text-align: center;
  }
  article{
   width:95%;
   margin:auto 2.5% auto 2.5%;
   height:850px;
   background-color:tomato;
   display:none;
  }
 </style>
</head>
<body>
 <header>
  <button>Third Gallery</button>
  <button>Second Gallery</button>
  <button>Third Gallery</button>
 </header>
 <section>
  <article>
   <h1>This is the first gallery</h1>
  </article>


  <article>
   <h1>This is the second gallery</h1>
  </article>


  <article>
   <h1>This is the third gallery</h1>
  </article>
 </section>



 <script type="text/javascript">
  var button=document.getElementsByTagName('button');
  var gallery=document.getElementsByTagName('article');
  for(var i=0; i<button.length; i++){
   (function(index){
    button[index].onclick=function(){
     gallery[index].style.display="block";
      }
     }(i));
    }
 </script>
</body>
</html>

Possible duplicate of Javascript assigning event handlers via for loop — Andy
– Andy, Commented Dec 13, 2015 at 1:12

Josh Crozier · Accepted Answer · 2015-12-13 01:05:44Z

2

You could iterate over all the elements and compare the index of the button with the index of the current gallery item:

[].forEach.call(gallery, function (el, i) {
  el.style.display = i === index ? 'block': 'none';
});

or:

for (var i = 0; i < gallery.length; i++) {
  gallery[i].style.display = i === index ? 'block': 'none';
}

This will loop over all the elements and set the display of each element to none except for the on with an index that corresponds to the clicked button.

Example Here

var button = document.getElementsByTagName('button');
var gallery = document.getElementsByTagName('article');
for (var i = 0; i < button.length; i++) {
  (function(index) {
    button[index].onclick = function() {
      [].forEach.call(gallery, function (el, i) {
        el.style.display = i === index ? 'block': 'none';
      });
    }
  }(i));
}

answered Dec 13, 2015 at 1:05

Josh Crozier

242k56 gold badges401 silver badges316 bronze badges

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

1 Comment

chihabeddineAourinmouche Over a year ago

Hi, Thank you, your code is working perfectly as I need it to. I still need to understand some details in it, since I'm a beginner, there are still a couple things I haven't really got the hang of.

Praveen Kumar Purushothaman · Accepted Answer · 2015-12-13 01:05:22Z

1

What you have done is almost right... Loop through the whole thing and when the particular element comes, do not do that, but I don't understand what's the use of closure here:

var button=document.getElementsByTagName('button');
var gallery=document.getElementsByTagName('article');
for(var i=0; i<button.length; i++){
  if (i != 2) // Make sure `i` is not equal to 2.
    (function(index){
      button[index].onclick=function(){
        gallery[index].style.display="block";
      }
    }(i));
  }

answered Dec 13, 2015 at 1:05

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

4 Comments

Evan Trimboli Over a year ago

The closure is needed otherwise whenever the onclick executes i will always be button.length - 1.

Andy Over a year ago

Why are you writing code if you don't know what it does?

chihabeddineAourinmouche Over a year ago

Hi, thank you for your reply. I tried your version of the code, still it does not change the outcome :(

chihabeddineAourinmouche Over a year ago

About the closure, I am not sure what's the proper explanation to that, but if you try the code without closure, the "i" used in the for-loop does not apply to the gallery-Array, it only apply to the button-Array. so I suppose putting the closure is the programming's way to affect the "i" to all the different Arrays used in the involved block of code.

Collectives™ on Stack Overflow

Apply a JavaScript function to all Array elements except the ith element

2 Answers 2

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related