Make a function that recognises which button is clicked

Question

I have a 3 buttons in my HTML, one for each of three ski resorts. When a button is clicked I want to display the relevant information.

<div id="buttonParent">
    <button id="btnStranda" type="button" value="0">Stranda</button>
    <button id="btnFjellseter" type="button" value="1">Fjellseter</button>
    <button id="btnOveroeye" type="button" value="2">Overøye</button>
</div>

I have this working, but the problem is I've made 3 separate functions which I believe could easily be made into 1.

If all the onclick events go to the same function, how do I make the function detect which button was clicked so it will display the correct information?

function boot() 
{
    document.getElementById("btnStranda").onclick = infoStranda;
    document.getElementById("btnOveroeye").onclick = infoOveroeye;
    document.getElementById("btnFjellseter").onclick = infoFjellseter;
}

Pastebin

Possible duplicate of [JavaScript - onClick to get the ID of the clicked button](https://stackoverflow.com/questions/4825295/javascript-onclick-to-get-the-id-of-the-clicked-button) — Andy Hoffner, Feb 05 '19 at 21:37
Include the content of the functions you’ve written to see what you’re actually trying to achieve with them, what differentiates them, what reuse of logic can be achieved. — amyloula, Feb 05 '19 at 21:44

nicholaswmin · Answer 1 · 2019-02-06T11:17:43.873

3

When functions get fired via an Event, they pass a parameter to the event handler, usually named event or e, which is the event itself.

e.currentTarget refers to the element to which the event handler has been attached.

document.querySelector('#foo').onclick = doSomething
document.querySelector('#bar').onclick = doSomething


function doSomething(e) {
  // log id of current target element of the click event
  console.log(e.currentTarget.id, ' was clicked')
}

<button id="foo">Foo</button>
<button id="bar">Bar</button>

Alternatively, you can also use e.target which refers to the element that fired the event.

edited Feb 06 '19 at 11:17

answered Feb 05 '19 at 21:43

nicholaswmin

21,686
15
91
167

+1 However, I recommend using data attributes instead of the `id` property: ` – Ryan Wheale Feb 05 '19 at 21:51
I intentionally used an ID because I assume the OP is familiar with it. Good suggestion though, that's what I do too. – nicholaswmin Feb 05 '19 at 21:52

score 0 · Answer 2 · answered Feb 05 '19 at 21:39

You can make a function that you call with parameters depending on the button clicked. So you still have three distinct functions for the click listener. I think it is better than add some info (class or id) on the DOM nodes to distinct your cases in just one function.

So keep three functions but call a generic function to do the generic things.

So for example :

function commonOperation(indexInContact) {
    // make your operations based on the param(s)
}

// And one of your function that listen a click will call common 
function infoStranda() {
    commonOperation(0)
    // Do specific Stranda things if needed
}

Hope that helps :)

David · Answer 3 · 2019-02-05T23:28:48.750

There are a few different ways you could do it.

I would implement option 1 as its simple and clean, if your using jQuery option 3 is also not a bad shout.

Option 1: Add a function and pass object (self) into it

function displayInfoById(element) {
     console.log(element.value);
}

<div id="buttonParent">
    <button id="btnStranda" type="button" value="0" onclick="displayInfoById(this)">Stranda</button>
    <button id="btnFjellseter" type="button" value="1" onclick="displayInfoById(this)">Fjellseter</button>
    <button id="btnOveroeye" type="button" value="2" onclick="displayInfoById(this)">Overøye</button>
</div>

Option 2: Using the attached event handler to get the event currentTarget.

document.getElementById("btnStranda").onclick = displayInfo;
document.getElementById("btnOveroeye").onclick = displayInfo;
document.getElementById("btnFjellseter").onclick = displayInfo;

function displayInfo(event) {
  console.log(event.currentTarget.value)
}

<div id="buttonParent">
    <button class="buttonClass" id="btnStranda" type="button" value="0">Stranda</button>
    <button class="buttonClass" id="btnFjellseter" type="button" value="1">Fjellseter</button>
    <button class="buttonClass" id="btnOveroeye" type="button" value="2">Overøye</button>
</div>

Option 3: Using a class attribute with jQuery event handler .on('click'):

$(".buttonClass").on('click', function(event) {
  console.log(event.target.value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="buttonParent">
    <button class="buttonClass" id="btnStranda" type="button" value="0">Stranda</button>
    <button class="buttonClass" id="btnFjellseter" type="button" value="1">Fjellseter</button>
    <button class="buttonClass" id="btnOveroeye" type="button" value="2">Overøye</button>
</div>

Make a function that recognises which button is clicked

3 Answers3