DOM en fichero .js

edmonddantes · #1 (**permalink**) 11/02/2015, 04:58

Hola.
A ver si alguiénme puede ayudar, pues empiezo con JavaScript y lo del DOM me está pudiendo.

Tengo una serie de imágenes. Quiero crear una función asociada por un sólo addEventListener para click

Dentro de la función quiero
a) Identificar que imagen genera el evento
b) Si es una imagen determinada cambiarla por otra.

Por lo que necesito saber es 1. como identificar la imagen que genera el evento, 2.Como conocer su ID para usarlo en un IF, 3.Como modificar su contenido.

En resumen lo que pretendo es no tener que usar un onClick en cada imagen con una función distinta asociada a cada una.

Os adjunto el poco código que he hecho de prueba pero que no acaba de funcionarme.

¿Puede alguien ayudarme? Estoy pelín desesperado.

Gracías de antemano.

<!DOCTYPE HTML >
<html>
<head>
<meta charset="utf-8">
<script languaje="javascript" type="text/javascript">
function cambiarMarca() {
var elEvento = arguments[0];
elEvento.src="markblanca.png";
}
document.addEventListener("click", cambiarMarca);
</script>
</head>
<body>
<image id="btro" src="btnrojo.png" height="45" width="45">
<image id="btaz" src="btnazul.png" height="45" width="45">
<image id="btve" src="btnverde.png" height="45" width="45">
<image id="btam" src="btnamarillo.png" height="45" width="45">
<image id="btfu" src="btnfucsia.png" height="45" width="45">
<image id="btna" src="btnnaranja.png" height="45" width="45">
</body>
</html>

Alexis88 · #2 (**permalink**) 11/02/2015, 09:41

Bienvenido a FDW

Lo que puedes hacer es tomar a todas las imágenes ya sea por el tipo de elemento o por una clase que asignes a todas (recomendable) y mediante un bucle, asignes a cada imagen una misma función que se ejecutará al momento de dar un clic a cualquier imagen.

Código Javascript:

Ver original[].forEach.call(document.querySelectorAll("img"), function(img){
    img.addEventListener("click", function(){
        alert(this.src + "\n" + this.id);
    }, false);
});

En el ejemplo que te estoy dando, al momento de dar un clic a cualquiera de las imágenes, se mostrará un mensaje de alerta con la ruta de la imagen que contiene y su identificador.

Por cierto, la etiqueta se llama <img>, no <image>.

Saludos

edmonddantes · #3 (**permalink**) 11/02/2015, 10:36

Hola Alexis.

Muchas gracias por tu respuesta.

Lamentablemente, no he conseguido que funcione. Seguro que estoy haciendo algo mal

, pero no lo acabo de ver y lo he probado en Safari, Firefox y Chrome.

Te adjunto el código completo con tu ejemplo a ver si me puedes decir algo.

Por cierto. ¿que significado tiene []. al comienzo de tu código?

Este es el código completo que no me funciona:

<!DOCTYPE HTML >
<html>
<head>
<meta charset="utf-8">
<title>Presentación</title>
<link href="estilos1.css" rel="stylesheet" type="text/css">
<script languaje="javascript" type="text/javascript">

[].forEach.call(document.querySelectorAll("botonc"), function(img){
img.addEventListener("click", function(){
alert(this.src + "\n" + this.id);
}, false);
});

</script>
</head>

<body>
<img class="botonc" id="im16" src="markgris2.png" height="45" width="45" >
<img class="botonc" id="im26" src="markgris2.png" height="45" width="45">
<img class="botonc" id="im36" src="markgris2.png" height="45" width="45">
</body>
</html>

Alexis88 · #4 (**permalink**) 11/02/2015, 12:34

Coloca el código JavaScript debajo de la última etiqueta <img> y antes de la etiqueta </body> para que cargue luego de que hayan cargado los elementos del documento.

Por otra parte, como document.querySelectorAll devuelve un conjunto de nodos y no un array, no puedo iterar directamente sobre él con el método forEach, por lo que debo de crear una instancia de un Array para poder aplicar dicho método en la lista de nodos.

Puede ser de cualquiera de estas formas:

Código Javascript:

Ver original[].forEach.call(lista de nodos, función);
Array.prototype.forEach.call(lista de nodos, función);

Recuerda que el [] representa a un array.

Saludos