How to add event handlers to HTML buttons from within JavaScript code

Question

I have a list of buttons (squares) in HTML like this -

  <td><button id="18" ></button></td>
  <td><button id="28" ></button></td>
  <td><button id="38" ></button></td>
           ...

Earlier, for each button, I had to put code within the button tag itself to add an event handler, like this:

  <button id="18" onclick="squareWasClicked(event)">

  function squareWasClicked(event)
   {
      var element = event.target; 

      // more code
   }

But now I have found out that it is not good practice. So instead, I am trying to add event handlers from within my JavaScript code. But I don't know how to do that. So far, I have tried this:

  function assignEventsToSquares()
   {
     var i,j;

     for(i=1;i<=8;i++)
      {
        for(j=1;j<=8;j++)
         {
           var squareID = "" + i + "" + j;
           var square = document.getElementById(squareID);        
           square.onclick = squareWasClicked(); 
         }
      }
   }

But this simply calls the squareWasClicked() function. So how do I add it as an event handler so that the function will be invoked when the square is clicked? Also, how do I say something like:

     square.onclick = squareWasClicked(event);

event is not detected in the JavaScript code. Please help.

Alexander Pavlov · Accepted Answer · 2012-02-29 21:13:56Z

8

Use element.addEventListener() (originating from the DOM 2 Events spec). In your case it will be

document.getElementById("18").addEventListener("click", squareWasClicked, false);

answered Feb 29, 2012 at 21:13

Alexander Pavlov

32.4k5 gold badges71 silver badges95 bronze badges

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

5 Comments

Alexander Pavlov Over a year ago

On a side note, according to the spec, "ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores (""), colons (":"), and periods (".")."_

jfriend00 Over a year ago

For older versions of IE (before IE9), you will need to use attachEvent() as they don't support addEventListener.

Alexander Pavlov Over a year ago

Right, there is a cross-browser solution for this.

CodeBlue Over a year ago

In the squareWasClicked() method, to access the button element, I am saying, var element = this; Is that right?

Alexander Pavlov Over a year ago

No, to reference the element on which the event was dispatched, you should use event.target (also study the concept of event bubbling.) In event listeners, this will reference the global context (window) unless you pass in a bound function as a listener (i.e. myFunc.bind(receiver, arg1, .., argN))

M.C. · Accepted Answer · 2013-11-09 18:52:42Z

5

square.onclick = squareWasClicked();

This calls your click function and assigns the result to your element's event listener, which isn't what you want. Remove the ()s so that the function itself gets assigned. Hence, it should look like this

square.onclick = squareWasClicked;

edited Nov 9, 2013 at 18:52

M.C.

1,7553 gold badges29 silver badges34 bronze badges

answered Feb 29, 2012 at 21:28

Neil

55.5k8 gold badges65 silver badges74 bronze badges

2 Comments

CodeBlue Over a year ago

Thanks! That was so concise! Why then is the addEventListener used? Is it older syntax?

Alexander Pavlov Over a year ago

addEventListener is a newer syntax (emerged in DOM 2, as opposed to DOM 0 listeners you are considering.) If you are not using DOM 2, you are missing out! :)

Collectives™ on Stack Overflow

How to add event handlers to HTML buttons from within JavaScript code

2 Answers 2

5 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Related