How apply onclick on div tag using className(javascript)

Question

I have a div like

div class="ncf-container nfc-bottom-right">
<div class="ncf info">
<button>X</button>
<p class="nfc-message">New Notification</p>
</div>
</div>

how to apply onclick on div using class name(Javascript)?

Answer 1

Here is how to add event Using Jquery and javascript.

var classname = document.getElementsByClassName("nfc-bottom-right");
var myFunction = function() {
    alert('clicked javascript way');
};
for (var i = 0; i < classname.length; i++) {
    classname[i].addEventListener('click', myFunction, false);
}


$(".nfc-bottom-right").on("click",function(){
  alert('Jquery way');
})

.nfc-bottom-right{
 border:2px solid green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="ncf-container nfc-bottom-right">
<div class="ncf info">
<button>X</button>
<p class="nfc-message">New Notification</p>
</div>
</div>

Answer 2

jQuery

$('info').on('click', function() { // ... your code to execute onClick });

Vanilla JS

document.querySelector('.info').addEventListener('click', function() { // ... your code to execute onClick });

Answer 3

You can specify onclick behavior for a div tag, via class name in the following way:

<!-- This is your div, with custom class name -->
<div class="yourClassName">
Div Content
</div>

<script>
     document.querySelector('.yourClassName')
     .addEventListener('click', function() {

       // This is the logic that is run when the div with yourClassName class is clicked
       alert('the div was clicked');
     })
</script>