To assign onclick event to multiple buttons

Question

I am working on a code to generate multiple buttons depending on user input

    for(var loop = 0; loop < up.length ; loop++){
document.write('<button style="background-color:'+ up[loop] +';width:100;height:100" </button>');

}

however I want to have same onclick function for every button,but if I use like the one below, the function doesn't gets executed . What's the problem and where am I going wrong? Please help.

document.write('<button style="background-color:'+ up[loop] +';width:100;height:100" onclick= "myfn()" </button>');

Valid HTML is a prerequisite to get anything working, and using some sort of DOM insertion instead of document.write is always a good idea. — adeneo
– adeneo, Commented Nov 14, 2013 at 19:58

Mister Epic · Accepted Answer · 2013-11-14 19:56:34Z

1

Typo, you don't close your opening tag:

 document.write('<button style="background-color:'+ up[loop] +';width:100;height:100" onclick="myfn()"></button>');

Always make sure you validate with the W3c markup validation service: http://validator.w3.org

You should also investigate unobtrusively attaching event handlers, writing handlers inline isn't ideal.

answered Nov 14, 2013 at 19:56

Mister Epic

16.8k13 gold badges88 silver badges157 bronze badges

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

Comments

m1. · Accepted Answer · 2013-11-14 20:00:37Z

0

what about something like this (no jquery needed and no document.write):

var button;
for (i=0; i<5; i++) {
    button = document.createElement('button');
    button.innerHTML = "button - " + i;
    button.addEventListener('click', myFn);
    document.body.appendChild(button);
}


function myFn() {
    alert('button clicked');
}

see here: http://jsfiddle.net/yNFqy/1/

answered Nov 14, 2013 at 20:00

m1.

1,3359 silver badges9 bronze badges

3 Comments

Prog Grl Over a year ago

It worked! thanks,but how can I modify the look and feel of the button using css?

m1. Over a year ago

Yes, you can add a line there: button.classList.add('your-classname-here') and then style it w/ CSS

Prog Grl Over a year ago

well, my function myFn() needs element at 'i' th position,like up[i],how can I pass an argument to myFn() here?

almo · Accepted Answer · 2013-11-14 19:58:07Z

0

Use jQuery
Add a class to the buttons (always the same class)
User jQuery's click method to handle the click

$('.class-name).click(function() { alert("click"); });

answered Nov 14, 2013 at 19:58

almo

6,4376 gold badges50 silver badges93 bronze badges

Collectives™ on Stack Overflow

To assign onclick event to multiple buttons

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related