In Javascript - setting an onclick attribute for a button that calls a function with a given argument

Question

I'm making a card game in Javascript and one of the things the webpage does is create buttons with the name of a card that you click to use the card. At least, in theory.

Code:

function addButton(card) {
    var newbutton = document.createElement("input");

    newbutton.setAttribute("type", button);
    newbutton.setAttribute("id", 'someButton');
    newbutton.setAttribute("value",card.displayName);
    newbutton.setAttribute("name",card.name);
    newbutton.setAttribute("onclick",'useCard(name)'); ///this is what's not working

What I'd like is for the onclick attribute to use the named card (the card's name is card.name, which might be different from its displayed name). Instead, it's using useCard with 'name' as the argument, which is obviously wrong. What's the correct line of code here?

Use a template. What you have is a lot of unneeded crap-code. — Šime Vidas
– Šime Vidas, Commented Oct 3, 2013 at 19:59

ComFreek · Accepted Answer · 2013-10-03 20:18:25Z

3

Adding an event listener would be a better and cleaner option:

newbutton.addEventListener('click', function () {
  useCard(this.getAttribute("name"));
});

If you really need to support IE < 9, you have to check for addEventListener compatibility first and use attachEvent in case the former isn't supported:

// generic helper function
function addEventListenerX(elem, evt, listener) {
  if ("addEventListener" in window) {
    elem.addEventListener(evt, listener);
  }
  else {
    elem.attachEvent("on" + evt, listener);
  }
}


addEventListenerX(newbutton, 'click', function () {
  useCard(this.getAttribute("name"));
});

If you're already using a JS framework like jQuery or prototype, use their listener system. They will automatically add compatibliity for you.

edited Oct 3, 2013 at 20:18

answered Oct 3, 2013 at 19:58

ComFreek

29.5k18 gold badges107 silver badges157 bronze badges

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

3 Comments

ComFreek Over a year ago

@AlienWebguy I've added a patch ;)

Šime Vidas Over a year ago

Better: On page load: var on = 'addEventListener' in window ? 'addEventListener' : 'attachEvent';. Then, when binding event handlers: newbutton[on]('click', useCardListener);

ComFreek Over a year ago

@ŠimeVidas That won't work because attachEvent requires events to be prefixed with 'on'. I've added a helper function, now.

SeanCannon · Accepted Answer · 2013-10-03 19:59:30Z

1

Replace this:

newbutton.setAttribute("onclick",'useCard(name)'); ///this is what's not working

with this:

if (newbutton.addEventListener) {
    newbutton.addEventListener('click', function() { useCard( card.name ); });
else {
    newbutton.attachEvent('onclick', function() { useCard( card.name ); });
}

answered Oct 3, 2013 at 19:59

SeanCannon

78.1k17 gold badges126 silver badges145 bronze badges

Comments

Timothy S. Van Haren · Accepted Answer · 2013-10-03 19:58:29Z

0

Try this:

 newbutton.setAttribute("onclick",'useCard("' + card.name + '")');

answered Oct 3, 2013 at 19:58

Timothy S. Van Haren

8,9762 gold badges32 silver badges34 bronze badges

Comments

Vijay · Accepted Answer · 2013-10-03 20:00:16Z

0

Use this

 newbutton.setAttribute("onclick",'useCard('+card.name+')');

in place of

 newbutton.setAttribute("onclick",'useCard(name)');

answered Oct 3, 2013 at 20:00

Vijay

1,0346 silver badges19 bronze badges

Collectives™ on Stack Overflow

In Javascript - setting an onclick attribute for a button that calls a function with a given argument

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related