0

I am using Javascript to open a modal when the user clicks inside a div on the page. This uses a click event listener for the common parent for both divs.

When the div is clicked I would like to pass an ID integer to the javascript function so that it displays relevant data inside the modal. I will use the ID to fetch data from the database before displaying it in the modal.

How can I pass input data using an event listener just like when a javascript function is called and the input data is specified at the time you call it myFunction(input_data) ?

Many thanks

I will attach the javascript used here:

<script>
  // 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];

  document.querySelector('.parent').addEventListener('click', displayModal);

  function displayModal() {
    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';
    }
  };
</script>

This is the HTML with the divs:

<div class="parent">
  <div id="myCheck" class="board_order">
    { Some Data }
  </div>

  <div id="myCheck2" class="board_order">
    { Some Data }
  </div>
</div>
VnoitKumar
  • 1,350
  • 15
  • 29
Jeanclaude
  • 189
  • 1
  • 4
  • 15
  • Sorry I don't understand exactly your question, do you want to know if addEventListener('click') does the same thing than window.onclick ? – Onoulade May 20 '20 at 08:05
  • Thanks Onoulade, I want to know if addEventListener can take input data just like when you call a javascript function and state the data at the time you call it MyFunction(input_data) – Jeanclaude May 20 '20 at 08:08
  • OK ! Well you can't with this method, the alternative will be to store all the variable you need to pass in the element itself : https://stackoverflow.com/a/11986895/8235763 – Onoulade May 20 '20 at 08:14

0 Answers0