elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Trabajando con las ramas de git (tercera parte)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  [Pregunta]: Detectar un click sobre un elemento		0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: [Pregunta]: Detectar un click sobre un elemento  (Leído 2,767 veces)
Leguim


Desconectado Desconectado

Mensajes: 720



Ver Perfil
[Pregunta]: Detectar un click sobre un elemento
« en: 29 Enero 2019, 20:23 pm »
Buenas tardes!

Mi problema es el siguiente, necesito detectar cuando se hace un click a un elemento, normalmente uso una ID para esto pero de ante mano no se cual será la cantidad de botones en la que se podrá hacer click, es por eso que usar una ID esta descartado ya que una ID sólo se puede usar en un elemento.

digamos que el código es..

Código
  1. var boton = document.getelementbyid('el_boton');
  2.  
  3. boton.addEventListener('click', boton_click, false);
  4.  
  5. function boton_click()
  6. {
  7.   alert('se hizo un click');
  8. }
  9.  

mediante clases, ya que como dije mas arriba de entrada no tengo la cantidad de botones.. como podría hacerse algo parecido/similar?

Gracias desde ya!
En línea
iCoke

Desconectado Desconectado

Mensajes: 16


Ver Perfil
Re: [Pregunta]: Detectar un click sobre un elemento
« Respuesta #1 en: 29 Enero 2019, 21:19 pm »
Código:
const detectarClick = (classBoton) => {
    let boton = Array.prototype.slice.apply(document.querySelectorAll(classBoton));

        boton.forEach(element => {
            element.addEventListener('click',()=>{
                  alert('se hizo un click');
                })
        });
          

  
}
detectarClick(".btnEditarPack")

Saludos amiguito!


En línea
EdePC
Moderador Global
***
Desconectado Desconectado

Mensajes: 2.159



Ver Perfil
Re: [Pregunta]: Detectar un click sobre un elemento
« Respuesta #2 en: 29 Enero 2019, 23:33 pm »
Saludos,

- Puedes adjuntar el Evento al Contenedor de los Botones, luego examinas el evento y sacas el Target, el cual es el Elemento dentro del contenedor que ha recibido el Evento (btn.target):

https://jsbin.com/rijihogepi/edit?html,output

Código
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <meta name="viewport" content="width=device-width">
  6.   <title>JS Bin</title>
  7. </head>
  8. <body>
  9.   <div id="botones">
  10.     <button>Botón 1</button>
  11.     <button>Botón 2</button>
  12.     <button>Botón 3</button>
  13.     <button>Botón 4</button>
  14.     <button>Botón 5</button>
  15.   </div>
  16.   <div id="log"></div>
  17.   <script>
  18.     document.getElementById("botones").addEventListener("click", function(btn){
  19.       document.getElementById("log").innerHTML = btn.target.innerHTML;
  20.     }, false);
  21.   </script>
  22. </body>
  23. </html>
En línea
Leguim


Desconectado Desconectado

Mensajes: 720



Ver Perfil
Re: [Pregunta]: Detectar un click sobre un elemento
« Respuesta #3 en: 30 Enero 2019, 22:07 pm »
Cita de: iCoke en 29 Enero 2019, 21:19 pm
Código:
const detectarClick = (classBoton) => {
    let boton = Array.prototype.slice.apply(document.querySelectorAll(classBoton));

        boton.forEach(element => {
            element.addEventListener('click',()=>{
                  alert('se hizo un click');
                })
        });
          

  
}
detectarClick(".btnEditarPack")

Saludos amiguito!

¡Muchas gracias a los dos por responder!
El código funciona pero necesito saber la posición o la cantidad del elemento al que se hizo click.. digamos hay 3 divs.. en cada div esta ese boton (con la misma clase)
al dar click deberia mandar un mensaje "se hizo click en el boton X" X sería el numero de la clase, osea si es el elemento 1 con esa clase, el 2, el 3, o el 4 dependiendo cuantos tenga con esa clase.. no se si me explico.. gracias!!

ACTUALIZACIÓN: Hice esto pero lo que hace es imprimirme la posición el ultimo elemento no del cual hice click.

Código
  1.         var boton_options = document.querySelectorAll('.boton_options_anuncio');
  2. 	var cant_boton_options = document.querySelectorAll('.boton_options_anuncio').length;
  3.  
  4. 	for(var i = 0; i < cant_boton_options; i++) 
  5. 	{
  6. 		var boton = boton_options[i];
  7.  
  8. 		boton.addEventListener('click', function(){si(i)}, false);
  9. 	}
  10.  
  11. 	function si(i)
  12. 	{
  13. 		console.log(i);
  14. 	}
  15.  
« Última modificación: 30 Enero 2019, 23:10 pm por MiguelCanellas » En línea
iCoke

Desconectado Desconectado

Mensajes: 16


Ver Perfil
Re: [Pregunta]: Detectar un click sobre un elemento
« Respuesta #4 en: 31 Enero 2019, 01:27 am »
no se si entendi bien, proba esto..

Código
  1. const detectarClick = (classBoton) => {
  2.     let boton = Array.prototype.slice.apply(document.querySelectorAll(classBoton));
  3.  
  4.         boton.forEach(element => {
  5.             element.addEventListener('click',()=>{
  6. 						let msj = element.textContent
  7.                   alert(`hiciste click en: ${msj}`);
  8.                 })
  9.         });
  10.  
  11.  
  12.  
  13. }
  14. detectarClick(".btn")
[/tt]

Código
  1. <div id="botones">
  2.   <button class="btn">boton 1</button>
  3.   <button class="btn">boton 2</button>
  4.   <button class="btn">boton 3</button>
  5.   <button class="btn">boton 4</button>
  6. </div>

si no es esto lo que buscas avisame, y pruebo de nuevo ajja saludos!
En línea
Leguim


Desconectado Desconectado

Mensajes: 720



Ver Perfil
Re: [Pregunta]: Detectar un click sobre un elemento
« Respuesta #5 en: 31 Enero 2019, 03:11 am »
Cita de: iCoke en 31 Enero 2019, 01:27 am
no se si entendi bien, proba esto..

Código
  1. const detectarClick = (classBoton) => {
  2.     let boton = Array.prototype.slice.apply(document.querySelectorAll(classBoton));
  3.  
  4.         boton.forEach(element => {
  5.             element.addEventListener('click',()=>{
  6. 						let msj = element.textContent
  7.                   alert(`hiciste click en: ${msj}`);
  8.                 })
  9.         });
  10.  
  11.  
  12.  
  13. }
  14. detectarClick(".btn")
[/tt]

Código
  1. <div id="botones">
  2.   <button class="btn">boton 1</button>
  3.   <button class="btn">boton 2</button>
  4.   <button class="btn">boton 3</button>
  5.   <button class="btn">boton 4</button>
  6. </div>

si no es esto lo que buscas avisame, y pruebo de nuevo ajja saludos!

Probé tu código pero me salen muchos cuadraditos en lugar del valor algo así.. "hiciste click en: [][][][][][][][][][]"
En línea
EdePC
Moderador Global
***
Desconectado Desconectado

Mensajes: 2.159



Ver Perfil
Re: [Pregunta]: Detectar un click sobre un elemento
« Respuesta #6 en: 31 Enero 2019, 05:05 am »
- Por otro lado, yo estoy entiendo de que quieres usar un bucle for para indexar cada botón que tenga una clase específica. Dicho índice es el número de botón procesado el el bucle para agregarle el evento click, y que dicho evento debe mostrar ese índice.

https://jsbin.com/layunogihu/edit?html,output

Código
  1.   <div id="botones">
  2.     <button class="btn">boton 1</button>
  3.     <button class="btn">boton 2</button>
  4.     <button class="btn">boton 3</button>
  5.     <button class="btn">boton 4</button>
  6.   </div>
  7.   <div id="log"></div>
  8.  
  9.   <script>
  10.     let botones = document.querySelectorAll('.btn');
  11.     let index = 1;
  12.     for (let boton of botones) {
  13.       let mensaje = `Click en el botón: ${index}`;
  14.       boton.addEventListener('click', () => alert(mensaje));
  15.       index++;
  16.     }
  17.   </script>
  18.  
« Última modificación: 31 Enero 2019, 05:30 am por EdePC » En línea
Leguim


Desconectado Desconectado

Mensajes: 720



Ver Perfil
Re: [Pregunta]: Detectar un click sobre un elemento
« Respuesta #7 en: 31 Enero 2019, 05:31 am »
Cita de: EdePC en 31 Enero 2019, 05:05 am
- Por otro lado, yo estoy entiendo de que quieres usar un bucle for para indexar cada botón que tenga una clase específica. Dicho índice es el número de botón procesado el el bucle para agregarle el evento click, y que dicho evento debe mostrar ese índice.

https://jsbin.com/layunogihu/edit?html,output

Código
  1.   <div id="botones">
  2.     <button class="btn">boton 1</button>
  3.     <button class="btn">boton 2</button>
  4.     <button class="btn">boton 3</button>
  5.     <button class="btn">boton 4</button>
  6.   </div>
  7.   <div id="log"></div>
  8.  
  9.   <script>
  10.     let botones = document.querySelectorAll('.btn');
  11.     let index = 1;
  12.     for (let boton of botones) {
  13.       boton.addEventListener('click', () => alert('Click en el boton: ' + index++));
  14.     }
  15.   </script>

WOAO! Me salvaste la vida Ede GRACIAS! igualmente, MUCHAS GRACIAS ICOKE!!!!
En línea
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Pregunta Sobre el Manejo del Evento Click
.NET (C#, VB.NET, ASP) 		7U15MK 5 4,815 Último mensaje 4 Mayo 2007, 19:54 pm
por MaLkAvIaN_NeT
[Solucionado] Detectar posicion del click en imagen? « 1 2 »
Programación Visual Basic 		Cromatico 14 6,728 Último mensaje 8 Diciembre 2010, 00:35 am
por Psyke1
detectar item de lista con doble click y obtener id de elemento
Programación C/C++ 		dewolo 7 4,806 Último mensaje 4 Octubre 2011, 22:57 pm
por Eternal Idol
Detectar elemento y rellenar en página web html?
Programación Visual Basic 		usuario oculto 0 2,661 Último mensaje 8 Octubre 2011, 12:36 pm
por usuario oculto
Detectar click en un Iframe « 1 2 »
Desarrollo Web 		mapers 11 5,874 Último mensaje 22 Mayo 2014, 16:23 pm
por mapers
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines