возвращаемое значение из серии кнопок

Question

возвращаемое значение из серии кнопок

1

поэтому у меня есть этот код, и я чувствую, что есть способ сделать это без утверждения if, возможно, с "этим", но я не могу полностью увидеть решение. Я пытаюсь получить значение кнопки для предупреждения при нажатии.

<form>
<button id="cathetersize14" type="button" value = "14g" onclick="cath()">14g</button>
<button id="cathetersize16" type="button" value = "16g" onclick="cath()">16g</button>
<button id="cathetersize18" type="button" value = "18g" onclick="cath()">18g</button>
<button id="cathetersize20" type="button" value = "20g" onclick="cath()">20g</button>
<button id="cathetersize22" type="button" value = "22g" onclick="cath()">22g</button>
<button id="cathetersize24" type="button" value = "24g" onclick="cath()">24g</button>

function cath() {


    var msg = document.getElementById("").value;
    alert(msg);



     }
</script>

Christof 12 июль 2018, в 01:51

Источник

Теги:

javascript

event-handling

4 ответа

1

Передайте событие в обратный вызов onclick и добавьте параметр в функцию cath. Затем вы можете получить доступ к значению, как показано здесь:

function cath($event) {
    var msg = $event.target.value;
    alert(msg);
}

<button id="cathetersize14" type="button" value = "14g" onclick="cath(event)">14g</button>

Ovid2020 11 июль 2018, в 20:55

0

Кроме того, вы можете устранить повторяющийся onclick в своем html, выбрав элементы кнопки в вашем javascript. Вы можете выбрать по тегу, но я добавил имена классов в свои элементы для примера ниже (предполагая, что на странице могут быть другие элементы кнопки).

const buttons = document.getElementsByClassName('cathetersize');
  
for (let button of buttons) {
  button.onclick = (event) => {
      alert(event.target.value);
  }
}

<form>
  <button class="cathetersize" id="cathetersize14" type="button" value="14g">14g</button>
  <button class="cathetersize" id="cathetersize16" type="button" value="16g">16g</button>
  <button class="cathetersize" id="cathetersize18" type="button" value="18g">18g</button>
  <button class="cathetersize" id="cathetersize20" type="button" value="20g">20g</button>
  <button class="cathetersize" id="cathetersize22" type="button" value="22g">22g</button>
  <button class="cathetersize" id="cathetersize24" type="button" value="24g">24g</button>
</form>

benvc 11 июль 2018, в 22:15

0

Смотрите ответ от @Tibrogargan выше для самого чистого подхода.
benvc 13 июль 2018, в 04:59

0

Вы получаете в качестве параметра event.target элемент, запускающий событие. Таким образом вы можете сделать что-то вроде:

function cath(event) {
  alert(event.target.value);
}

Надеюсь, это проблема, которую вы хотели решить!

OscarDOM 11 июль 2018, в 20:49

Ещё вопросы

Смотрите ответ от @Tibrogargan выше для самого чистого подхода.

Tibrogargan · Accepted Answer · 2018-07-11T21-53-00.000Z

Несколько расширив предыдущие ответы, поддерживая разделение между вашей HTML-презентацией и кодом JavaScript.

// Event handler for "cath" button click events
function cathHandler(event) {
    console.log(event.target.value);
}

// Once all DOM elements have been created, attach event handlers
document.addEventListener("DOMContentLoaded", function() {
    for (let button of document.getElementsByClassName("cath")) {
        button.onclick = cathHandler;
    }
});

<form>
<button class="cath" type="button" value="14g">14g</button>
<button class="cath" type="button" value="16g">16g</button>
<button class="cath" type="button" value="18g">18g</button>
<button class="cath" type="button" value="20g">20g</button>
<button class="cath" type="button" value="22g">22g</button>
<button class="cath" type="button" value="24g">24g</button>
</form>