Using multiple buttons on same function that redir

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>

标签： javascript html function button

4条回答

Evening l夕情丶

2楼-- · 2019-02-10 12:11

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.

0人赞添加讨论(0) 举报

淡お忘

3楼-- · 2019-02-10 12:13

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

0人赞添加讨论(0) 举报

Fickle 薄情

4楼-- · 2019-02-10 12:19

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:

0人赞添加讨论(0) 举报

Juvenile、少年°

5楼-- · 2019-02-10 12:19

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>

0人赞添加讨论(0) 举报

Using multiple buttons on same function that redir

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间