How do I open a modal by clicking any of say 100 boxes with the same class?

Question

This opens the modal when clicking on the first element with the class "today". How can I make it open when clicking all elements with class "today"?

// Get the modal and the open-modal-button
var modal = document.getElementById("modal");
var btn = document.getElementsByClassName("today")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {modal.style.display = "block";}

      
        1

Updated Figuring this out: The 100 boxes now open the modal and I'd like the button I have added to the modal to color the element which was clicked.

I unfortunately have no clue how to do this except thinking of the using "This" ?!!?

Code now looks like this:

// Get the modal and the open-modal-buttons
var modal = document.getElementById("modal");
var btns = document.getElementsByClassName("today");
var btnsLength = btns.length

for (var i = 0; i < btnsLength; i++) {
btns[i].onclick = function () {
modal.style.display = "block";
};
}

user_11908502 · Answer

Since the return value of document.getElementsByClassName is an HTML collection, you should iterate through it and add the onclick event to each of their elements.

In order to do this, you should first get all elements with class="today" by your selector document.getElementsByClassName('today'), so it will return an HTML collection (which is an array-like object) of all your element with class="today". Then you should iterate through them with a traditional for loop or Array#forEach.

var modal = document.getElementById("modal");
var btns = document.getElementsByClassName("today");

var btnsLength = btns.length;

for (var i = 0; i < btnsLength; i++) {
  btns[i].onclick = function() {
    modal.style.display = "block";
  }
}

.today {
  padding: 5px;
  border: 1px solid;
}

#modal {
  display: none;
  margin: 5px;
}


  
    
      1
      2
      3
      4
      5
      6
      7
      8
    
    
      9
      10
      11
      12
      13
      14
      15
    
  


Element with today class is clicked!

UPDATE

According to your updated question, in order to access the property which fires the event, you should use event interface, with the target property within it, to get which element fires the event. So you should pass event into your function and whenever the function get invoked you have the targeted element in your function too.

var modal = document.getElementById("modal");
var btns = document.getElementsByClassName("today");

var btnsLength = btns.length;

for (var i = 0; i < btnsLength; i++) {
  btns[i].onclick = function(event) {
    event.target.style.color = 'red';
    modal.style.display = "block";
  }
}

.today {
  padding: 5px;
  border: 1px solid;
}

#modal {
  display: none;
  margin: 5px;
}


  
    
      1
      2
      3
      4
      5
      6
      7
      8
    
    
      9
      10
      11
      12
      13
      14
      15
    
  


Element with today class is clicked!

user_3241174 · Answer

var btn = document.getElementsByClassName("today")[0]; will return only the first element. You can get all of them removing [0]:

var btns = document.getElementsByClassName("today");

and given it is a list, you can iterate through it with a for loop:

for (var btn of btns) {
      btn.onclick = function() { modal.style.display = "block";};
    }

or with a forEach:

btns.forEach(btn => btn.onclick = function() {modal.style.display = "block";});

How do I open a modal by clicking any of say 100 boxes with the same class?

2 Answers

UPDATE