How to add a onclick event to an element using javascript

问题:

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'); 

回答1:

I'm shocked that more than one people answering the question thought getElementsByClassName will give you an element. Seriously?

Ok, let's talk about the solution:

getElementsByClassName actually returns an HTMLCollection, even though you have only one element with that classname in DOM, so 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 CSS selector string as parameter.

回答2:

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

 var element= document.getElementsByClassName('classname');  for(var i=0;i

回答3:

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); 

回答4:

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

回答5:

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    } }); 

回答6:

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 

回答7:

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 }; 

文章来源: How to add a onclick event to an element using javascript