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 sam

Answer 1

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.

Answer 2

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;
   }
}

Answer 3

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:

• element.addEventListener().
• for () {...} loop.`
• switch () {...} statement.

Answer 4

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>