web-dev-qa-db-fra.com

Comment ajouter un événement onclick à un élément en utilisant javascript

J'ai créé un élément à l'aide de document.getElementsByClassname et souhaite ajouter un événement onclick à cet élément, afin que, lorsque quelqu'un clique sur cet élément, la fonction onclick soit appelée.

J'ai essayé avec écouteur d'événement, mais cela fonctionnera même si je ne clique sur aucune fonction. En utilisant jQuery, nous pouvons le faire en liant un événement click, mais mon exigence est en javascript /

Merci!

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

var element= document.getElementsByClassName('classname');
javascriptjquerydom
6
221B

Je suis choqué de voir que plus d'une personne répondant à la question pense que getElementsByClassName vous donnera un élément. Sérieusement?

Ok, parlons de la solution:

getElementsByClassName renvoie en fait une HTMLCollection, même si vous ne possédez qu'un seul élément avec ce nom de classe dans le DOM, vous devez donc le récupérer avec l'index 0.

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

Alternativement, comme vous n'avez qu'un seul élément avec le nom de classe, vous pouvez utiliser querySelector en toute sécurité, ce qui renverra le premier élément de correspondance.

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

Veuillez noter le point dans le code ci-dessus. querySelector accepte la chaîne de sélecteur CSS en tant que paramètre.

10
Leo

Essaye ça:
document.getElementsByClassName renvoie toujours un tableau d'éléments.

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

Vous devez passer la référence d'une fonction au lieu d'ajouter une alerte en ligne.

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

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

J'ai pu ajouter un événement onclick à un élément en utilisant le code javascript suivant

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

    // place your code here
};
0
Jose Kj
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
0
Nishanth Suresh

Vous pouvez utiliser la méthode .attr() jquery pour cela:

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

Essaye ça

JavaScript 

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

Essayez avec javascript

0
Ishan Jain

Vous pouvez utiliser une délégation d'événements ou DOMNode.matches.

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