Как прочитать значение выбранного элемента в JavaScript

Question

У меня есть несколько таких изображений:

    <img id="geqfader" frequency="100" src="img/fader.png" />
    <img id="geqfader" frequency="400" src="img/fader.png" />
    <img id="geqfader" frequency="1600" src="img/fader.png" />
    <img id="geqfader" frequency="6300" src="img/fader.png" />

Когда пользователь нажимает на изображение, я хочу вызвать функцию и передать значение frequency:

  document.getElementById('geqfader').addEventListener('click', function() {
    showResult(hereIWantTheFrequencyValue, toneFrequency)
  });

Как передать значение изображения frequency в showResult (где hereIWantTheFrequencyValue)?

Answer 1

В HTML значение id должно быть уникальным для каждого элемента. В такой ситуации, как ваша, вы можете использовать пользовательский атрибут для ваших элементов. Чтобы получить элемент с помощью пользовательского атрибута, вы можете использовать функцию querySelectorAll в JavaScript, как показано в следующем примере:

let elms = document.querySelectorAll('[my_id="geqfader"]');

for(let elm of elms){
elm.addEventListener('click', function(e) {
    console.log(e.target.getAttribute('frequency'))
  });
}

<img my_id="geqfader" frequency="100" src="img/fader.png" />
<img my_id="geqfader" frequency="400" src="img/fader.png" />
<img my_id="geqfader" frequency="1600" src="img/fader.png" />
<img my_id="geqfader" frequency="6300" src="img/fader.png" />

EDIT В качестве альтернативы я предлагаю вам использовать атрибут class вместо пользовательского атрибута, который позволяет вам использовать функцию getElementsByClassName вместо querySelectorAll. Кроме того, префикс data- дает нам возможность использовать пользовательские атрибуты данных.

let elms = document.getElementsByClassName('geqfader');

for(let elm of elms){
elm.addEventListener('click', function(e) {
    console.log(e.target.getAttribute('frequency'))
  });
}

<img class="geqfader" data-frequency="100" src="img/fader.png" />
<img class="geqfader" data-frequency="400" src="img/fader.png" />
<img class="geqfader" data-frequency="1600" src="img/fader.png" />
<img class="geqfader" data-frequency="6300" src="img/fader.png" />

Answer 2

замените все идентификаторы на класс и установите onclick="showValue(this)" для всех тегов img, как показано ниже:

        <img class="geqfader" onclick="showValue(this)" frequency="100" src="img/fader.png" />
        <img class="geqfader" onclick="showValue(this)" frequency="400" src="img/fader.png" />
        <img class="geqfader" onclick="showValue(this)" frequency="1600" src="img/fader.png" />
        <img class="geqfader" onclick="showValue(this)" frequency="6300" src="img/fader.png" />


<script>

function showValue(img){
  alert(img.getAttribute('frequency'));
}

</script>

Answer 3

Вы должны узнать больше JavaScript и понять, как работают DOM и EventListener. Прежде всего идентификаторы являются уникальными, даже если вы можете определить дубликаты его недопустимой разметки. document.getElementById возвращает только первый соответствующий элемент, поэтому ваш обработчик кликов прикрепляется только к первому img.
Это должно работать:

Array.slice.call(document.querySelectorAll("img[frequency]")).forEach(function(img) {
  img.addEventListener("click", function(e) {
    var frequency = e.target.getAttribute("frequency");
  });
});

Array.slice.call используется, потому что querySelectorAll возвращает NodeList, а не Array

Answer 4

event.target.getAttribute('frequency')

Где event - аргумент, который функция обработчика событий принимает в качестве аргумента.