CODEWITHSUNDEEP
javascripthtmlfunctionbutton
Magnus
Magnus

Reputation: 1

Make a function that recognises which button is clicked

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

Upvotes: 0

Views: 1174

Answers (3)

nicholaswmin
nicholaswmin

Reputation: 22949

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.

Upvotes: 3

David
David

Reputation: 641

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>

Upvotes: 0

BenoitVasseur
BenoitVasseur

Reputation: 782

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 :)

Upvotes: 0

Related Questions