-4

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";
  }
  }
Laurent
  • 711
  • 2
  • 12
  • 30

4 Answers4

1

You can use event.target in your event handler to determine the object that dispatched the event. This way you can easily attach one handler to the parent to process events on all of its children.

document.getElementById("div").onclick = function(e){
  console.log(e.target);
}
<div id="div">
  <button id="btn1">Button 1</button>
  <button id="btn2">Button 2</button>
  <button id="btn3">Button 3</button>
</div>
Andrew Svietlichnyy
  • 743
  • 1
  • 6
  • 13
  • OP might not want the event to fire when a click happens inside the div but not on any button. –  Apr 01 '18 at 09:22
1

The event listener is passed an event object. It's target property is the element on which the event was fired.

document.querySelectorAll("button").forEach(function (e) {
    e.addEventListener("click", function (event) {
        console.log(event.target)
    });
});
<div>
   <button id="button1">Button 1</button>
   <button id="button2">Button 2</button>
   <button id="button3">Button 3</button>
</div>
  • Thank you Devashish, do I need to add this part to the javascript file I have? – Laurent Apr 01 '18 at 09:05
  • 1
    Yes. But note that the code will add a click event listener to all the buttons in the document. If you want this to execute only when certain buttons are clicked, give those buttons a class and change the selector to `document.querySelectorAll(".button-class")`. –  Apr 01 '18 at 09:10
  • Thanks for the hint, Devashish. I see indeed something in the console Does it mean also that I need to modify the function btn.onclick accordingly ? Now, I am not sure how I can exploit what is given by the console. – Laurent Apr 01 '18 at 09:17
  • You don't need the line `btn.onclick` and assign an event listener that way. `e.addEventListener("click", function (event) { console.log(event.target) });` is adding an event listener on every button in the document. –  Apr 01 '18 at 09:20
  • If it helped, please accept the answer. You're welcome :) –  Apr 01 '18 at 09:23
-1
 <button id="myBtn1" onclick="btnclick(this)">Open Modal</button>
 <button id="myBtn2"  onclick="btnclick(this)">Open Modal</button>
 <button id="myBtn3"  onclick="btnclick(this)">Open Modal</button>

And in your javascript function you can see:

function btnclick(ref){
   var id = $(ref).attr('id');
}
Alive to die - Anant
  • 70,531
  • 10
  • 51
  • 98
Sachin Aghera
  • 486
  • 3
  • 8
-2

Since you have included the js using the script tag in your HTML file, all the js functionalities and events will be available.

// Get the button that opens the modal

var btn = document.getElementById("myBtn");

there is a mistake in your code, you should provide a valid id.

var btn = document.getElementById("myBtn1"); // this will work

now myBtn1 will initiate the onclick call

// in your modal.js

document.querySelectorAll("button").forEach(function (e) {
    e.addEventListener("click", function (event) {
        console.log(event.target)
    });
});
Shyam Kumar
  • 148
  • 9