Trigger button click in javascript?

Question

Here is my button code:

<button class="popup-trigger" data-modal="modal-1"></button>

How can i trigger the button click or even trigger the class popup-trigger with the data-modal modal-1?

would like to know in pure javascript, if you cant do it, then jquery. thanks

Answer 1

Find your DOM element, then call the click method:

document.getElementById("myButton").click(); 

Answer 2

There can be various number of ways

<button class="popup-trigger" onclick="myFunction()" data-modal="modal-1"> </button>
<script>
function myFunction(){
 //do something here
}
</script>

Secondly using jQuery

<button id="my-btn" class="popup-trigger" data-modal="modal-1"> </button>
<script>
$("#my-btn").click(function(){
 //do something here
 })
</script>

Answer 3

In pure JavaScript:

// Since there can be multiple elements with the class "popup-trigger", it returns an array. Putting the [0] will call the first button with the class "popup-trigger".
var myButton = document.getElementsByClassName("popup-trigger")[0];
// If you wanted to check clicks on ALL buttons with the class, remove the [0] at the end.

// Check for clicks on the button
myButton.onclick = function(e) {
  alert(e.target.getAttribute("data-modal"));
}

<button class="popup-trigger" data-modal="modal-1">Button</button>

I inserted comments explaining it. Let me know if you have any questions.

Answer 4

What about this...

let button = document.querySelectorAll('button.popup-trigger')

function myFunction(){
    alert("Button pressed")
}

button.forEach(function(element){
    if (element.dataset.modal == "modal-1"){
   element.addEventListener("click", myFunction, false);
    }
})

<button class="popup-trigger" data-modal="modal-1">Button 1</button>
<button class="popup-trigger" data-modal="modal-2">Button 2</button>
<button class="popup-trigger" data-modal="modal-3">Button 3</button>