Tengo varias imágenes como esta:

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

Cuando el usuario hace clic en una imagen, quiero invocar una función y transmitir el valor de frequency:

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

¿Cómo puedo pasar el valor de la imagen frequency a showResult (donde está hereIWantTheFrequencyValue)?

0
Max 8 sep. 2018 a las 14:51

4 respuestas

La mejor respuesta

En HTML, el valor id debe ser un valor único para cada elemento. En una situación como la suya, puede usar un atributo personalizado en sus elementos. Para obtener el elemento usando su atributo personalizado, puede usar la función querySelectorAll en JavaScript como se muestra en el siguiente ejemplo:

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

EDITAR Como alternativa, le sugiero que use el atributo class en lugar de un atributo personalizado que le permita usar la función getElementsByClassName en lugar de querySelectorAll. Además, el prefijo data- nos da la capacidad de usar atributos de datos personalizados.

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" />
1
Max 9 sep. 2018 a las 14:20

Reemplace todos los identificadores con clase y establezca onclick="showValue(this)" en todas las etiquetas img como el código a continuación ...

        <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>
1
Akbar Mirsidikov 8 sep. 2018 a las 12:39

Debería aprender más JavaScript y comprender cómo funciona DOM y EventListener. En primer lugar, los ID son únicos, incluso si puede definir duplicados su marcado no válido. document.getElementById devuelve solo el primer elemento coincidente, por lo que su controlador de clics solo se adjunta a la primera imagen.
Esto debería funcionar:

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

Array.slice.call se usa porque querySelectorAll devuelve un NodeList y no un Array

0
Code Spirit 8 sep. 2018 a las 12:00

event.target.getAttribute('frequency')

Donde event es el argumento que la función del controlador de eventos toma como argumento.

-1
Ertan Kara 8 sep. 2018 a las 11:59