title: How to press a button in an array to change content accordingly in JavaScript?
body: <p>I have an array in js containing multiple clickable items. When I click any of them, I want to change the contents of other divs to show the corresponding name and description. I now use something like this:</p>
  
  <pre><code>window.addEventListener("load",function(){
  
      var displayName = document.getElementById("display-title");
      var displayDesc = document.getElementById("display-desc");
  
      var projectNames = ["Name1", "Name2"];
      var projectDescs = ["Example project 1", "Example project 2"];
  
      var projectButtons = [document.getElementById("project-One"), document.getElementById("project-Two")];
  
      for(var i = 0; i &lt; projectButtons.length; i++){
  
          projectButtons[i].addEventListener("click", function(){
  
              displayName.innerHTML = projectNames[i];
              displayDesc.innerHTML = projectDescs[i];
  
          });
  
      }
  
  });
  </code></pre>
  
  <p>However when I click any of the buttons I always get the second name and description showing. How would I go about making it change to the selected button? In the final thing, I'm changing more than just the name and description, and I will be adding many more buttons in the array, so making different functions for each button isn't really an option, and I'm limited to using Javascript, so JQuery or PHP isn't an option. I'm probably missing something obvious, but I have no idea what...</p>
  
  <hr>
  
  <p>EDIT:</p>
  
  <p>The following seems to work, which is what was answered already, although I'm not sure if I've implemented it correctly:</p>
  
  <pre><code>for(var i = 0; i &lt; projectButtons.length; i++) {
          (function(i) {
              setTimeout(function() {
                  projectButtons[i].addEventListener("click", function(){
                      displayName.innerHTML = projectNames[i];
                      displayDesc.innerHTML = projectDescs[i];
                  });
              });
          })(i);
      }
  </code></pre>