Capturar onclick en distintos objetos

[jamejilla]

Hola:

Tengo una lista de elementos.Cada uno de ellos con un icono para eliminar el elemento y lo que quiero es que al hacer click en alguno de esos iconos me salga un mensaje de comfirmación para eliminar el elemento.

Yo siempre capturo los eventos con getElementById pero como ahora tengo muchos elementos y no les puedo poner un id a cada uno pues no sé como detectar el evento.

Gracias de antemano

[zerokilled]

muestranos un ejemplo porque realmente no se si comprendi. te adelanto que lo mas seguro lo puedas hacer sacandole beneficio al DOM y el objeto de evento. si tienes una estructura similar para todos tus elementos con el DOM puedes referirte a ellos con la ayuda del evento. de este modo no es necesario asignarle un ID a todos tus elementos.

[jamejilla]

A ver:


Elemento 1 --------------------------
Elemento 2 --------------------------
Elemento 3 --------------------------
Elemento 4 --------------------------
Elemento 5 --------------------------
Elemento 6 --------------------------

Yo quiero que al hacer click en cualquiera de esos iconos se llame a una función.
Entonces en mi archivo .js tendria

window.onload=function() {

//Aqui normalmente tengo cosas del tipo document.getElementById("pepe").onclick = unafuncion

Quiero saber que poner aquí para capturar el click sobre cualquiera de los iconos

}

[GagleKas]

Todos los elementos tienen la misma estructura o para eliminarlos tienes que utilizar diferentes formas?

Si es lo primero no hace falta ningun ID. A la funcion onclick le pasas this y vas haciendo parentNode hasta que llegues al elemento para poder eliminarlo.

Si es lo segundo, se puede hacer de muchas formas, pero la mas facil es que le pongas un ID distinto a cada icono. Por ejemplo, "icono_0", "icono_1", etc. y luego en la funcion onclick le pases como parametro el ID del icono que se haya apretado. En funcion de la ID utilizas una forma distinta de eliminar el elemento.

[jamejilla]

A ver a mi lo que me interesa es cómo hacer para detectar los clicks en cualquiera de esos iconos.Los iconos se generan dinamicamente con php osea que no sé cuantos va a haber.Lo que no puedo hacer es tener algo así:

window.onload = function() {

document.getElementById("Elemento1").onclick = mifuncion;
document.getElementById("Elemento2").onclick = mifuncion;
document.getElementById("Elemento3").onclick = mifuncion;
document.getElementById("Elemento4").onclick = mifuncion;

...

}

Porque no sé cuantos va a haber.Por eso lo importante es que llamen a la función,lo que tienen que hacer en la función ya lo sé hacer.Por eso quiero saber algún modo de capturarlos todo,no sé si haciendo referencia a su className o a la etiqueta name...

[GagleKas]

Si los generas dinamicamente con php, tambien podras generar dinamicamente un numero que se vaya incrementando, no?

[Adler]

Hola

Prueba con esto

Primero es meter todos los elementos en un div

<div id="contenedor">
Elemento 1
Elemento 2
Elemento 3
Elemento 4
Elemento 5
Elemento 6
</div>

Ahora sacas todos los elementos

Código javascript:

var elem = documents.getElementById("contenedor").getElementsByTagName("IMG")
 

un ciclo

Código javascript:

for (var i = 0; i < elem.length; i++)
 
document.getElementById(elem[i]).onclick = mifuncion;
 

Suerte

[jamejilla]

Muchisimas gracias era lo que estaba buscando.Ya pensé que no sabía explicarme.
Voy a probarlo

[jamejilla]

Les he puesto a las imagenes un class = img-borrar pero me da el error

Error: document.getElementById(iconosBorrar[i]) is null

¿Por qué puede ser? Todas las imagenes van dentro del div zona-titulos aunque no son hijos de este.

var iconosBorrar =
document.getElementById("zona-titulos").getElementsByClassName("img-borrar");

for (var i = 0; i < iconosBorrar.length; i++)

document.getElementById(iconosBorrar[i]).onclick = mostrarMensajeConfirmacion;

[Adler]

Hola

Tal y como quieres hacerlo no vas a lograrlo nunca, ya que siempre vas a saltar ese error.

La forma más sencilla es usar el guión te mostré anteriormente. Solo tendrías que ponerle un id a cada imagen

Suerte

[zerokilled]

aqui un ejemplo sin utilizar ID's para los elementos. el ejemplo de Adler tambien funciona, solo que en su caso él/ella recorre el elemento raiz en busca de imagenes y luego asignarle el evento a cada uno de ellos. la idea que originalmente quise exponer en mi primer mensaje era asignandole el evento al elemento raiz y utilizar el objeto evento para determinar donde ocurrio la accion. funciona bien si se mantiene una estructura similar, como en el ejemplo a continuacion.

Código:

<html>
<head>
<style type="text/css">
body{
font-size:.8em;
font-family:trebuchet ms;
}
span{
cursor:pointer;
color:#33F;
text-decoration:underline;
font-size:.7em;
}
</style>

<script type="text/javascript">
onload = function(){
element("container").onclick = function(evt){
var evt = evt || event, elem = evt.target || evt.srcElement; // DOM || IE;
if(/span/i.test(elem.nodeName) && /image-remove/.test(elem.className) && element("container") == elem.parentNode.parentNode)
// en la condicion se verifica: el elemento sea un SPAN, el elemento contiene la clase "image-remove", que el padre del elemento sea hijo de la raiz;
return element("container").removeChild(elem.parentNode);
}}

function element(id){
return document.getElementById(id);
}
</script>
</head>

<body><ul id="container">
<li><p>tu contenido 1</p><span class="image-remove">Remover</span></li>
<li><p>tu contenido 2</p><span class="image-remove">Remover</span></li>
<li><p>tu contenido 3</p><span class="image-remove">Remover</span></li>
<li><p>tu contenido 4</p><span class="image-remove">Remover</span></li>
</ul></body></html>

por supuesto, en este ejemplo he utilizado un SPAN en lugar de una imagen pero no requiere grandes cambios en el script.

[Adler]

Como siempre, te sales colega

[jamejilla]

Muchas gracias por responder,tiene muy buena pinta.Mañana lo probaré