I have posted about this already, but I think my question was poorly explained. I have multiple divs with class of "popupEdit".  
 I want to be able to target these using getElementsByClassName.....the result being a popup with some input field. See the code below.  
I know that getElementsByClassName returns an array of all the elements with the class EditQuestion, but I have failed to write a function that works to use this array. My lack of skill (I'm a newbie).   
Could someone give me the solution so I have something I can study. Apologies for asking directly for the answer...I have tried numerous things without success.  
Many thanks

HTML

```
   <button class="EditQuestion">Edit</button>
   <div class="overlay2"></div>
   <div class="popupEdit">
   <h2>Edit Question, some input box here..</h2>
   <button class="CloseBtn2">Close</button>
   </div> 

```

JS

```
     window.onload = function () {

        document.getElementsByClassName("EditQuestion").onclick = function () {
         var overlay2 = document.getElementsByClassName("overlay2");
         var popupEdit = document.getElementsByClassName("popupEdit");
         overlay2.style.display = "block";
         popupEdit.style.display = "block";
       };

       document.getElementsByClassName("CloseBtn2").onclick = function () {
         var overlay2 = document.getElementsByClassName("overlay2");
         var popupEdit = document.getElementsByClassName("popupEdit");
         overlay2.style.display = "none";
       popupEdit.style.display = "none";
       };
     };

```

CSS

```
      button.EditQuestion{
       padding: 0;
       border: none;
       background: none;
       color:#A8A8A8;
       font-weight: bold;
      }

      button.CloseBtn2 {
       padding: 0;
       border: none;
       background: none;
       position:absolute;
       right:10px;
       top:5px;
      }

      .popupEdit {
        display:none;
        position:fixed;
        left:40%;        
        top:30%;         
        width:600px;     
        height:150px;
        margin-top:-75px;
        margin-left:-150px;
        background:#FFFFFF;
        border:1px solid #000;
        z-index:100000;      
      }

    .overlay2 {
      display:none;    
      position:fixed;  
      left:0px;        
      top:0px;         
      width:100%;      
      height:100%;     
      background:#000; 
      opacity:0.5;     
      z-index:99999;   
    }

```

Edited version - I have tried to use querySelectorAll as suggested by TJ Crowder....the querySelector works, but when I add in the for loop and change to querySelectorAll it fails....any suggestions

```
 window.onload = function () {

 document.querySelectorAll(".EditQuestion").onclick = function () {
 var overlay2 = document.querySelectorAll(".overlay2");
 var popupEdit = document.querySelectorAll(".popupEdit");
 var index;
        for (index = 0; index < overlay2.length; ++index) {
        overlay2[index].style.display = "none";
        popupEdit[index].style.display = "block";
    }
 };

 document.querySelectorAll(".CloseBtn2").onclick = function () {
     var overlay2 = document.querySelectorAll(".overlay2");
     var popupEdit = document.querySelectorAll(".popupEdit");
     var index;
        for (index = 0; index < overlay2.length; ++index) {
        overlay2[index].style.display = "none";
        popupEdit[index].style.display = "block";
    }
};

```

};