Good day,

I have three buttons - let's call them myBtn1, myBtn2 and myBtn3 - doing basically the same operation (i.e. opening a div in modal mode).

I am a little bit stuck to know "who" (i.e. which button) called my javascript. Is there an easy way to know that or do I need to duplicate my javascript part ?

Sorry if the question may sound silly.

Thanks a lot for your help.

Cheers

My html code :

```
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css/test.css" />
  </head>
  <body>

    <!-- Trigger/Open The Modal -->
      <button id="myBtn1">Open Modal</button>
      <button id="myBtn2">Open Modal</button>
      <button id="myBtn3">Open Modal</button>        
    <!-- The Modal -->
    <div id="myModal" class="modal">

    <!-- Modal content -->
    <div class="modal-content">
      <span class="close">&times;</span>
      <p>Some text in the Modal... </p>
      <p>Called by [myBtn1 or myBtn2 or myBtn3] </p>
    </div>
    <script type="text/javascript" src="./scripts/modal.js"></script>
    </div> 

  </body>
</html>

```

My javascript (modal.js) :

```
/*
    modal.js    
*/

  // Get the modal
  var modal = document.getElementById('myModal');

  // Get the button that opens the modal
  var btn = document.getElementById("myBtn");

  // Get the <span> element that closes the modal
  var span = document.getElementsByClassName("close")[0];

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

  // When the user clicks on <span> (x), close the modal
  span.onclick = function() {
  modal.style.display = "none";
  }

  // When the user clicks anywhere outside of the modal, close it
  window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
  }

```