CODEWITHSUNDEEP
javascriptcross-browseraddeventlistener
exeleon
exeleon

Reputation: 121

Cross-browser addevent function javascript

I'm trying to create a function that adds an event to each button in a class. I have all of the buttons in an array and wanted to use Dustin Diaz's addevent() cross browser solution, but am unsure how to implement it. I'm used to using frameworks for this sort of thing, but have to use pure JS for this one. Any pointers or advice on how to use Dustin's solution would be appreciated.

Ok so after taking @Pointy 's advice, I wrote this that checks for addEventListener and if not uses attachEvent This however is not calling testFunction(). What am I doing wrong here?

function addEvents()
{
  var buttonArray=document.getElementsByClassName('mainButton');

  for(i=0; i < buttonArray.length; i++)
  {
    if (i.addEventListener) {
      i.addEventListener("click", testFunction);
    } 
    else if (i.attachEvent) {
      i.attachEvent("onclick", testFunction);
    }

    function testFunction() {
      alert("Test");
    } 
  }

  // Attach an event to each button that when clicked on will display an alert that say 'Button X clicked' where X = the button ID
}

Upvotes: 0

Views: 168

Answers (1)

Andreas
Andreas

Reputation: 2075

You are trying to add an event to a number. You should replace "i" with "buttonArray[i]" and add an else-case (defensive coding).

function addEvents() {
    var buttonArray = document.getElementsByClassName('mainButton');
    for(i = 0; i < buttonArray.length; i++) {    
        if (buttonArray[i].addEventListener) {
            buttonArray[i].addEventListener("click", testFunction);
        } else if (buttonArray[i].attachEvent) {
            buttonArray[i].attachEvent("onclick", testFunction);
        } else {
            throw new Error("This should be unreachable");
        }
    }

    function testFunction() {
        alert("Test");
    }
}

Upvotes: 1

Related Questions