Using multiple buttons on same function that redirects to different functions

Question

So..i'm having this problem for couple of days not knowing how to do this,and i need help.

I have multiple buttons and clicking all of them is redirecting me to same function and from that function is going to another function specified for that button. Any idea how can i go true couple of functions knowing which button is clicked? example :

 <html>

<button type="button" onclick="myFunction()" id="1">Button1</button>
<button type="button" onclick="myFunction()" id="2">Button1</button>
<button type="button" onclick="myFunction()" id="3">Button1</button>

<script>

function myFunction()
{
   var x=0;

    if (button 1){
     x=1;
     myFunction1(x);}

   if (button 2){
    x=2;
    myFunction2(x);}

    if (button 3){
     x=3;
     myFunction3(x);}

     ...
    myFunction3(x){
    alert(x);
}
}

</script>

</html>

i'll try it with switch/case and then make one variable for every button in case to past to other functions? i have approximately 10 different functions and some of them are being used by every button some with couple different buttons — sritno, Aug 23 '13 at 19:38

score 24 · Accepted Answer · answered Aug 23 '13 at 19:22

Easiest way would probably be to pass in the element into the function:

<button type="button" onclick="myFunction(this)" id="1">Button1</button>
<button type="button" onclick="myFunction(this)" id="2">Button1</button>
<button type="button" onclick="myFunction(this)" id="3">Button1</button>

function myFunction(elem) {
    alert(elem.id);
}

No need to think about event arguments or anything like that.

David Thomas · Answer 2 · 2013-08-23T19:33:59.763

At its simplest:

<button type="button" onclick="myFunction(this)" id="1">Button1</button>
<button type="button" onclick="myFunction(this)" id="2">Button1</button>
<button type="button" onclick="myFunction(this)" id="3">Button1</button>

function myFunction (button) {
    var x = button.id;
    switch (x) {
        case '1':
            myFunction1(x);
            break;
        case '2':
            myFunction2(x);
            break;
        case '3':
            myFunction3(x);
            break;
        default:
            return false;
    }
}

JS Fiddle demo.

Though I'd amend the above to use unobtrusive JavaScript, moving the JavaScript event-handling from the elements' HTML mark-up:

var buttons = document.getElementsByTagName('button');
for (var i = 0, len = buttons.length; i < len; i++) {
    buttons[i].onclick = function (){
        myFunction (this);
    }
}

JS Fiddle demo.

Or, to make it even easier (and add the event-handling to one element, rather than three):

function myFunction (event) {
    var x = event.target.id;
    console.log(event.target, x);
    switch (x) {
        case '1':
            myFunction1(x);
            break;
        case '2':
            myFunction2(x);
            break;
        case '3':
            myFunction3(x);
            break;
        default:
            return false;
    }
}

var parent = document.getElementById('parentElementID');
parent.addEventListener('click', myFunction);

JS Fiddle demo.

Incidentally, while it's valid (under HTML 5, not under HTML 4) to have an id that starts with a numeric character (0-9), in CSS it's difficult to target those elements (leading numeric characters require escaping, in any one of various ways); so it's still advisable to have a predictable alphabetic prefix to those ids.

References:

+1 pretty much what I was thinking but you typed faster. Also like the suggestion to get the code out of the markup. Yes, make the id alphanumeric, not just numeric. — Mark Schultheiss, Aug 23 '13 at 19:55

score 1 · Answer 3 · answered Aug 23 '13 at 19:21

IF you can change the HTML, try:

<button type="button" onclick="myFunction(1)" id="1">Button1</button>
<button type="button" onclick="myFunction(2)" id="2">Button1</button>
<button type="button" onclick="myFunction(3)" id="3">Button1</button>

And change your JS to:

function myFunction(bnum)
{
   var x=0;

    if (bnum == 1){
     x=1;
     myFunction1(x);}

   if (bnum == 2){
    x=2;
    myFunction2(x);}

    if (bnum == 3){
     x=3;
     myFunction3(x);}
}

It's a bit nicer in a switch:

function myFunction(bnum)
{
   var x=0;
   switch (bnum) {
      case 1:
          x = 1;
          myFunction1(x);
      break;
      case 2:
          x = 2;
          myFunction1(x);
      break;
      case 3:
          x = 3;
          myFunction1(x);
      break;
   }
}

score 1 · Answer 4 · answered May 19 '17 at 02:13

you could put

var button = document.getElementsByTagName("button"),
    len = button.length,
    i;
function click(){
  alert(this.id);
}
for(i=0;i<len;i+=1){
  button[i].onclick=click;
}

<button type="button" id="1">Button1</button>
<button type="button" id="2">Button1</button>
<button type="button" id="3">Button1</button>

score 0 · Answer 5 · answered Feb 05 '21 at 15:51

0

i just sent a number as a reference..

<button type="button" onclick="myFunction(1)">Button1</button>

and then at the function

function whatever(v){
  if (v == 1){
    //dot stuff..
  }
}

answered Feb 05 '21 at 15:51

ariel t

137
1
8

Using multiple buttons on same function that redirects to different functions

5 Answers5

Linked

Related