write multiple buttons in one function using javascript/jquery [duplicate]

Question

I want to write multiple buttons in one function using javascript/jquery. My problem is that

Everytime im writing a separate function for each button with separate onclick event like in the below code snippet
I want to write one function that includes multiple buttons

function todaySales() {
  alert('button1');
}

function yesterdaySales() {
  alert('button2');
}

function wtdsales() {
  alert('button3');
}

function llsales() {
  alert('button4');
}

function lastSevenDays() {
  alert('button5');
}

function lastThirtyDays() {
  alert('button6');
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<button id="but1" class="btn btn-outline-info" onclick="todaySales();">Today</button>
<button id="but2" class="btn btn-outline-info" onclick="yesterdaySales();">Yesterday</button>
<button id="but3" class="btn btn-outline-info" onclick="wtdsales();">WTD</button>
<button id="but4" class="btn btn-outline-info" onclick="llsales();">MTD</button>
<button id="but5" class="btn btn-outline-info" onclick="lastSevenDays();">Last 7 Days</button>
<button id="but6" class="btn btn-outline-info" onclick="lastThirtyDays()">Last 30 Days</button>

Possible duplicate of Using the same function with multiple buttons and call the same jQuery function in multiple buttons and Using multiple buttons on same function that redirects to different functions — adiga
– adiga, Commented Feb 28, 2019 at 9:17
(The third duplicate is much more cleaner and closer to what you want to achieve) — adiga
– adiga, Commented Feb 28, 2019 at 9:22

Kanha Sahu · Accepted Answer · 2019-02-28 09:25:59Z

You can give the same function name with different parameter value like

<button id="but1" class="btn btn-outline-info" onclick="salesAction(this, 'todaySales');">Today</button>
<button id="but2" class="btn btn-outline-info" onclick="salesAction(this, 'yesterdaySales');">Yesterday</button>
<button id="but3" class="btn btn-outline-info" onclick="salesAction(this, 'wtdsales');">WTD</button>
<button id="but4" class="btn btn-outline-info" onclick="salesAction(this, 'llsales');">MTD</button>
<button id="but5" class="btn btn-outline-info" onclick="salesAction(this, 'lastSevenDays');">Last 7 Days</button>
<button id="but6" class="btn btn-outline-info" onclick="salesAction(this, 'lastThirtyDays')">Last 30 Days</button>

<script>
function salesAction(thisObj, $salesVal){
  console.log($salesVal);
  // use switch to write separate logic for each sales
}
</script>

example : https://codepen.io/kaslab/pen/rROyVr

user8930932 · Accepted Answer · 2019-02-28 09:19:50Z

1

    function clickButton(buttonName){
      alert(buttonName);
    }

just need seed a params to function. It's easy.

answered Feb 28, 2019 at 9:19

user8930932

1251 silver badge10 bronze badges

Comments

iacobalin · Accepted Answer · 2019-02-28 09:23:17Z

You can use the same click handler function and just strip data out of your button's properties or you can pass data as parameters to that function.

function clickHandler(ev) {
  var target = event.target
  console.log(target.id, target.textContent) // or whatever property
  
}

<button id="but1" class="btn btn-outline-info" onclick="clickHandler();">Today</button>
<button id="but2" class="btn btn-outline-info" onclick="clickHandler();">Yesterday</button>
<button id="but3" class="btn btn-outline-info" onclick="clickHandler();">WTD</button>
<button id="but4" class="btn btn-outline-info" onclick="clickHandler();">MTD</button>
<button id="but5" class="btn btn-outline-info" onclick="clickHandler();">Last 7 Days</button>
<button id="but6" class="btn btn-outline-info" onclick="clickHandler();">Last 30 Days</button>

pedram shabani · Accepted Answer · 2019-02-28 09:38:28Z

0

Try it

      $(document).ready(function(){
          $(".btn").on('click',function() {
              alert( $(this).text())
          });
      });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">

</script>
<button id="but1" class="btn btn-outline-info">Today</button>
<button id="but2" class="btn btn-outline-info">Yesterday</button>
<button id="but3" class="btn btn-outline-info">WTD</button>
<button id="but4" class="btn btn-outline-info">MTD</button>
<button id="but5" class="btn btn-outline-info">Last 7 Days</button>
<button id="but6" class="btn btn-outline-info">Last 30</button>

edited Feb 28, 2019 at 9:38

answered Feb 28, 2019 at 9:25

pedram shabani

1,6803 gold badges20 silver badges32 bronze badges

1 Comment

LiN Over a year ago

Thanks! it helped me.

Davide Vitali · Accepted Answer · 2019-02-28 09:31:45Z

0

using jQuery is very simple: suppose your buttons are direct children of a div element having id=“buttonsArray”

$(‘#buttonsArray’).on(‘click’, ‘button’, function() {
        alert($(this));
    });

As you can see, this overload of the .on() method let you dynamically bind to the clicked element. You can use data attribute within every button to create a switch statement inside that function and then differentiate behavior of your function depending on what button was pressed

<button data-value=“oneValue”>
<button data-value=“otherValue”>

The switch statement:

var myValue = $(this).data()[“value”]
switch (myValue) {
    case “oneValue”:
        // do something
        break;
    case “otherValue”:
        // do something else
        break;
}

edited Feb 28, 2019 at 9:31

answered Feb 28, 2019 at 9:25

Davide Vitali

1,0351 gold badge8 silver badges26 bronze badges

4 Comments

fdomn-m Over a year ago

Your first code won't work as button is not a child of #but1 - better to use $(".btn-outline-info").on("click", function() ...

Davide Vitali Over a year ago

First time I saw the question, they were...

fdomn-m Over a year ago

Look again - just bad spacing in the original (pre-edit) post.

Davide Vitali Over a year ago

Oh, I see... I think is still better to reduce the possible elements to which the function could apply to. Edited

Amogh Hegde · Accepted Answer · 2019-02-28 09:20:27Z

HTML

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<button id="but1" class="btn btn-outline-info" onclick="onefunction();">Today</button>
<button id="but2" class="btn btn-outline-info" onclick="onefunction();">Yesterday</button>
<button id="but3" class="btn btn-outline-info" onclick="onefunction();">WTD</button>
<button id="but4" class="btn btn-outline-info" onclick="onefunction();">MTD</button>
<button id="but5" class="btn btn-outline-info" onclick="onefunction();">Last 7 Days</button>
<button id="but6" class="btn btn-outline-info" onclick="onefunction()">Last 30 Days</button>

JS

function onefunction() {
  if($(this).attr("id") == "but1"){
    alert('button1');
  }
  else if($(this).attr("id") == "but2"){
    alert('button2');
  }
  ...
}

Collectives™ on Stack Overflow

write multiple buttons in one function using javascript/jquery [duplicate]

6 Answers 6

Comments

Comments

Comments

1 Comment

4 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

1 Comment

4 Comments

Comments

Linked

Related