Сделайте функцию, которая распознает, какая кнопка нажата

Question

У меня есть 3 кнопки в моем HTML, по одной для каждого из трех лыжных курортов.Когда нажата кнопка, я хочу отобразить соответствующую информацию.

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

У меня это работает, но проблема в том, что я сделал 3 отдельные функции, которые, как я считаю, могут быть легко превращены в 1.

Если все события onclick переходят в одну и ту же функцию, как заставить функцию определять, какая кнопка была нажата, чтобы она отображала правильную информацию?

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

Pastebin

Answer 1

Когда функции запускаются через Событие , они передают параметр в обработчик события, обычно называемый event или e, который является самим событием.

e.currentTarget относится к элементу, к которому был прикреплен обработчик события.

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>

Кроме того, вы также можете использовать e.target, который относится к элементу, вызвавшему событие.

Answer 2

Есть несколько различных способов сделать это.

Я бы реализовал вариант 1 как простой и понятный, если вы используете jQuery , параметр 3 тоже неплохой крик.

Вариант 1: Добавить функцию и передать в нее объект (self)

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>

Вариант 2. Использование прикрепленного обработчика событий для получения события 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>

Вариант 3: Использование атрибута класса с обработчиком событий jQuery .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>

Answer 3

Вы можете сделать функцию, которую вы вызываете, с параметрами в зависимости от нажатой кнопки.Таким образом, у вас все еще есть три различные функции для прослушивателя щелчков.Я думаю, что это лучше, чем добавить некоторую информацию (класс или идентификатор) на узлы DOM, чтобы выделить ваши случаи только в одной функции.

Так что оставьте три функции, но вызовите универсальную функцию для выполнения общих задач.

Так, например:

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
}

Надеюсь, это поможет:)