write multiple buttons in one function using javascript/jquery

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](https://stackoverflow.com/questions/46462171/using-the-same-function-with-multiple-buttons) and [call the same jQuery function in multiple buttons](https://stackoverflow.com/questions/13083106) and [Using multiple buttons on same function that redirects to different functions](https://stackoverflow.com/questions/18410341) — adiga, Feb 28 '19 at 09:17
(The third duplicate is much more cleaner and closer to what you want to achieve) — adiga, Feb 28 '19 at 09:22

score 2 · Answer 1 · answered Feb 28 '19 at 09:25

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

score 1 · Answer 2 · answered Feb 28 '19 at 09:19

1

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

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

answered Feb 28 '19 at 09:19

user8930932

125
1
9

score 1 · Answer 3 · answered Feb 28 '19 at 09:23

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-28T09:38:28.047

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>

Davide Vitali · Answer 5 · 2019-02-28T09:31:45.103

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 '19 at 09:31

answered Feb 28 '19 at 09:25

Davide Vitali

1,017
8
24

Your first code won't work as `button` is not a child of `#but1` - better to use `$(".btn-outline-info").on("click", function() ...` – freedomn-m Feb 28 '19 at 09:26
First time I saw the question, they were... – Davide Vitali Feb 28 '19 at 09:27
Look again - just bad spacing in the original (pre-edit) post. – freedomn-m Feb 28 '19 at 09:29
Oh, I see... I think is still better to reduce the possible elements to which the function could apply to. Edited – Davide Vitali Feb 28 '19 at 09:31

score -1 · Answer 6 · answered Feb 28 '19 at 09:20

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');
  }
  ...
}

write multiple buttons in one function using javascript/jquery

6 Answers6