comment faire getElementsByClassName travail

Question

Je lisais à propos de getElmentByClassName mais je ne peux pas sembler le faire fonctionner dans un navigateur, La fonction que j'ai fonctionne quand appeler le nom d'ID, mais je voudrais être en mesure d'appeler le nom de classe.

Existe-t-il un moyen d'exclure Jquery?

C'est ce que j'ai, serait génial avec un peu d'aide. merci.

<ul><li><button class="testButton">Test button</button></li></ul> 

function OnButtonDown (button) { 
alert("The class work") 
} 

function Init() { 
    var className = "testButton"; 
    var button = document.getElementsByClassName(className); 
    if (button.addEventListener) { // all browsers except IE before version 9 
     button.addEventListener ("mousedown", function() { 
      OnButtonDown (button) 
      }, false); 
     button.addEventListener ("mouseup", function() { 
      OnButtonUp (button) 
      }, false); 
    } 
    else { 
     if (button.attachEvent) { // IE before version 9 
      button.attachEvent ("onmousedown", function() { 
       OnButtonDown (button) 
       }); 
      button.attachEvent ("onmouseup", function() { 
       OnButtonUp (button) 
       }); 
     } 
    } 
} 

Answer 1

getElementsByClassName() retourne une collection d'éléments HTML, vous devez accéder aux éléments de la collection en utilisant leur index:

button = document.getElementsByClassName(className)[0]; 
// your code here 

Si vous avez un seul élément, s'il vous plaît envisager d'utiliser .getElementById().

Answer 2

Ce que @micnic a dit.

FYI. Dans le cas où document.getElementById()ne le fait pas travail pour vous, voici comment vous gérer:

var button = false; 
var buttons = document.getElementsByClassName(className); 
for (var i=0; i<buttons.length; i++) { 
    button = buttons[i]; 
    // do stuff with button 
} 

Demo ici: http://jsfiddle.net/3pAeM/