How to add a onclick event to an element using javascript

Question

I have created an element using document.getElementsByClassname, and would like to add a onclick event to this element, so that when someone clicks on this element onclick function should be called.

I tried with event listener, but this will execute even when I don't click on any function. Using jQuery we can do that by binding a click event, but I my requirement is in javascript/

Thanks!

element.addEventListener("click", alert('clicked'), false);// Add onclick eventListener 

var element= document.getElementsByClassName('classname');

Matt Hampel · Accepted Answer · 2019-04-28 14:20:05Z

21

getElementsByClassName returns an HTMLCollection, so even though you have only one element with that classname in DOM, you have to retrieve it with index 0:

var element = document.getElementsByClassName('classname')[0];
element.addEventListener("click", function(e) {
    alert('something');
}, false);

Alternatively, since you only have one element with the classname, you can safely use querySelector, which will return the first match element.

var element = document.querySelector('.classname');
                                      ^
element.addEventListener("click", function(e) {
    alert('something');
}, false);

Please note the dot in above code. querySelector accepts a CSS selector string as a parameter.

edited Apr 28, 2019 at 14:20

Matt Hampel

5,25813 gold badges55 silver badges80 bronze badges

answered Dec 1, 2014 at 15:19

Leo

13.9k5 gold badges47 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Logar Over a year ago

IMHO, I would add that if you can assert that you will have only one element with a classname, then it should be an id and not a class

Leo Over a year ago

@Logar id implies that you want to identify an HTML element. It doesn't mean every unique element in the document should be labeled with an id. You don't necessarily do this to <html> or <body>, do you? In regards of "semantic web" it's a bad practice.

Vicky Gonsalves · Accepted Answer · 2013-11-16 12:02:03Z

6

Try this:
document.getElementsByClassName always returns array of elements.

 var element= document.getElementsByClassName('classname');
 for(var i=0;i<element.length;i++){
      element[i].addEventListener("click", function(){alert('clicked')}, false);   
 }

answered Nov 16, 2013 at 12:02

Vicky Gonsalves

11.8k3 gold badges39 silver badges58 bronze badges

3 Comments

221B Over a year ago

in my case, there are no array of elements, so only one element is there hence I dont need any array. I have used eventlistener but when I deploy this code in the website, while the page is loading my function executes, but I want my function to be executed only when user clicks on the element

Vicky Gonsalves Over a year ago

Read more about getElementsByClassName developer.mozilla.org/en-US/docs/Web/API/…

221B Over a year ago

exactly as instructed in the given page I have assigned some value to my element. but now the question is, how to I bind a onclick event for the element I have created

Punit Sachan · Accepted Answer · 2013-11-16 12:06:58Z

2

You have to pass reference of a function instead of adding inline alert.

var element= document.getElementsByClassName('classname');
function doSomething() {
  alert('clicked')
}

// add event listener to element 
element.addEventListener("click", doSomething, false);

answered Nov 16, 2013 at 12:06

Punit Sachan

5936 silver badges16 bronze badges

Comments

Ishan Jain · Accepted Answer · 2013-11-16 12:59:27Z

2

You can use .attr() jquery method for this:

$('.classname').attr("onClick", "javascript:alert('clicked'); return false;");

Try this

JavaScript

var element= document.getElementsByClassName('classname');
element[0].onclick = function() { alert('Hello'); };//-- here i used "[0]" to refer first matched element

Try with javascript

edited Nov 16, 2013 at 12:59

answered Nov 16, 2013 at 12:09

Ishan Jain

8,22111 gold badges52 silver badges77 bronze badges

3 Comments

221B Over a year ago

thanks for the reply, but I dont want to use jQuery instead I want in native javascript.

Yabada Over a year ago

you put the jquery tag.

Ishan Jain Over a year ago

Yes @EoiFirst: OP put Jquery tag.

xercool · Accepted Answer · 2014-11-12 23:50:51Z

0

You can use an event delegation or DOMNode.matches.

document.addEventListener('click', function(e) {
   if (e.target.className == 'classname') // if (e.target.matches('.classname'))
   {
       //do something
   }
});

answered Nov 12, 2014 at 23:50

xercool

4,6477 gold badges30 silver badges33 bronze badges

Comments

Nishanth Suresh · Accepted Answer · 2014-12-01 15:10:09Z

0

Please try the following:

var rows = 3;
var cols = 3;
var defaultVal=0;
var mainDiv=document.getElementById("mainDiv")
var arr = []
for (var i = 0; i < rows; i++) {
    arr[i] = [];
  for(var j=0;j<cols;j++){
    arr[i][j]=defaultVal++;
    var element=document.createElement("input");
    element.type="button";
    element.className="left";
    element.addEventListener("click", testFunction, false);
    element.value=arr[i][j];
    mainDiv.appendChild(element);


  }


}
function testFunction(){
    alert('hi')
}

//Use element.addEventListener("click", testFunction, false); 
//Use testFunction and not testFunction() as this "()" invokes the function

answered Dec 1, 2014 at 15:10

Nishanth Suresh

1011 silver badge3 bronze badges

Comments

Jose Kj · Accepted Answer · 2017-08-14 13:12:30Z

0

I was able to add an onclick event to an element using following javascript code

list_title = document.createElement('UL');
list_title.onclick=function() {

    // place your code here
};

answered Aug 14, 2017 at 13:12

Jose Kj

2,9622 gold badges30 silver badges41 bronze badges

Collectives™ on Stack Overflow

How to add a onclick event to an element using javascript

7 Answers 7

2 Comments

3 Comments

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

3 Comments

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related