Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] Eventos onclick fallan por falta de id

Estas en el tema de Eventos onclick fallan por falta de id en el foro de Javascript en Foros del Web. Hola. Tengo que instalar unas redirecciones por evento onclick, que son así en un archivo llamado redirecciones.js: Código: document.getElementById("v1").onclick = function(){document.location = "redireccion1";}; document.getElementById("v2").onclick = ...
  #1 (permalink)  
Antiguo 05/08/2019, 06:34
 
Fecha de Ingreso: noviembre-2005
Mensajes: 883
Antigüedad: 14 años
Puntos: 8
Eventos onclick fallan por falta de id

Hola.

Tengo que instalar unas redirecciones por evento onclick, que son así en un archivo llamado redirecciones.js:

Código:
document.getElementById("v1").onclick = function(){document.location = "redireccion1";};
document.getElementById("v2").onclick = function(){document.location = "redireccion2";};
document.getElementById("v3").onclick = function(){document.location = "redireccion3";};
document.getElementById("v4").onclick = function(){document.location = "redireccion4";};
document.getElementById("v5").onclick = function(){document.location = "redireccion5";};
document.getElementById("v6").onclick = function(){document.location = "redireccion6";};
document.getElementById("v7").onclick = function(){document.location = "redireccion7";};
document.getElementById("v8").onclick = function(){document.location = "redireccion8";};
document.getElementById("v9").onclick = function(){document.location = "redireccion9";};
document.getElementById("v10").onclick = function(){document.location = "redireccion10";};
document.getElementById("v11").onclick = function(){document.location = "redireccion11";};
document.getElementById("v12").onclick = function(){document.location = "redireccion12";};
El tema es que en html el index del sitio están todas los divisores "v" del 1 and 12 y no ha problema, todo funciona bien.

Luego hay una segunda sección con los divisores "v" del 1 and 8, y también funcionan.

Pero otra tercera sección que solo tiene los "v" del 9 al 12, y que no funciona ninguno de los eventos y te sale esto en la consola de fallos:

Uncaught TypeError: Cannot set property 'onclick' of null at redirecciones.js:1

Claramente lo que pasa es que al no haber divisores "v" del 1 al 8, da un fallo porque no existen esos elementos y parece que el código queda truncado y no sigue parseándolo.

¿Se puede arreglar esto para dejarlo así? Porque en otro caso, tendré que hacer dos archivos, uno para el índex y la sección segunda, con todo lo de arriba; y otro con los onclick para v9 en adelante. Pero sabemos que cuantos menos archivos mejor. Sobre todo si tienen que llevar elementos adicionales.

Un saludo y gracias por cualquier respuesta.





Gracias.
  #2 (permalink)  
Antiguo 05/08/2019, 08:50
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.543
Antigüedad: 11 años, 8 meses
Puntos: 1084
Respuesta: Eventos onclick fallan por falta de id

Si no muestras tu código solo podemos jugar adivinanzas y no siempre se anda de humor., sumado a que la ayuda sera imprecisa en muchos casos.

prueba a declarar
Código Javascript:
Ver original
  1. let v1 = ocument.getElementById("v1");
  2. if(v1 !== undefined){
  3. v1.onclick = function(){...}
  4. }
  #3 (permalink)  
Antiguo 05/08/2019, 09:27
 
Fecha de Ingreso: noviembre-2005
Mensajes: 883
Antigüedad: 14 años
Puntos: 8
Respuesta: Eventos onclick fallan por falta de id

El código no tiene ninguna especialidad. Una sucesión de sections. Son ventanas con un título y párrafo

Código:
<section id="v1">
   <h3>Título</h3>					 
      <p>Párrafo.</p>						
</section>
<section id="v2">
   <h3>Título</h3>					 
      <p>Párrafo.</p>						
</section>
...
Y no, tu propuesta no funciona.
  #4 (permalink)  
Antiguo 05/08/2019, 11:32
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.543
Antigüedad: 11 años, 8 meses
Puntos: 1084
Respuesta: Eventos onclick fallan por falta de id

Tal vez para ti no tiene ninguna especialidad, pero la finalidad de conocer tu código es poder reproducir el problema, te pido encarecidamente el código completo, tanto HTML como Javascript., un código a medias es como no ver nada., tampoco hay que publicar el código de todo tu sitio web, solo la sección que atañe al problema y lo suficiente para reproducirlo.

También recuerda que estamos en la sección de Javascript por lo que se evaluara especialmente este, que muestres el HTML sin el Javascript, nos resulta irrelevante.
  #5 (permalink)  
Antiguo 05/08/2019, 14:49
 
Fecha de Ingreso: abril-2006
Mensajes: 314
Antigüedad: 13 años, 6 meses
Puntos: 60
Respuesta: Eventos onclick fallan por falta de id

Bien generalmente se obtiene lo que se pide a preguntas poca elaborada dan como resultado respuestas poco elaboradas, esta es una comunidad de auto aprendizaje. hasta para algunos la inquietud del de la pregunta tiene varios metodos de resolver, y como se trata de autoaprendizaje, es tomarlo de ese modo, sin molestarse

Código Javascript:
Ver original
  1. document.body.addEventListener('click',function(evento){
  2.     if(evento.target.id){//si contiene un ID lo tomamos en cuenta
  3.         if(evento.target.id.substr(0,1)=='v'){
  4.             var es_numero=evento.target.id.substr(1);
  5.             if(es_numero==parseInt(es_numero)){//es quiere decir que es del TIPO v1 v2 v121 etc
  6.                 document.location = "redireccion"+es_numero.toString();
  7.             }
  8.         }  
  9.     }
  10. });
__________________
Mis aportes te ayudaron??, te hicieron ahorrar valiosos tiempo??, si quieres puedes agradecerme con un Gracias o con una donacion
https://paypal.me/pools/c/87BTML2gwr
  #6 (permalink)  
Antiguo 06/08/2019, 05:58
 
Fecha de Ingreso: noviembre-2005
Mensajes: 883
Antigüedad: 14 años
Puntos: 8
Respuesta: Eventos onclick fallan por falta de id

No conozco javascript suficientemente, pero sí html y el código que he indicado es lo que hay. Una serie de secciones identificadas de la manera expuesta dentro de una gran seccion con el nombre "ventanas".

Código:
<section id="ventanas">
<section id="v1">
   <h3>Título</h3>					 
      <p>Párrafo.</p>						
</section>
<section id="v2">
   <h3>Título</h3>					 
      <p>Párrafo.</p>						
</section>
...
</section>

Por cierto, "redireccion1" .... es el nombre que le he dado a las direcciones para simplificarlo aquí. Son urls con nombres complejos y no "redireccion1", "redireccion2", etc.

Gracias.
  #7 (permalink)  
Antiguo 06/08/2019, 06:44
 
Fecha de Ingreso: noviembre-2005
Mensajes: 883
Antigüedad: 14 años
Puntos: 8
Respuesta: Eventos onclick fallan por falta de id

Esto funciona perfectamente:

Código:
var enlace1 = document.getElementById("v1");
if(enlace1){
document.getElementById("v1").onclick = function(){document.location = "pagina1";};
}
var enlace2 = document.getElementById("v2");
if(enlace2){
document.getElementById("v2").onclick = function(){document.location = "pagina2";};
}	
var enlace3 = document.getElementById("v3");
if(enlace3){
document.getElementById("v3").onclick = function(){document.location = "pagina3";};
}
var enlace4 = document.getElementById("v4");
if(enlace4){
document.getElementById("v4").onclick = function(){document.location = "pagina4";};
}
var enlace5 = document.getElementById("v5");
if(enlace5){
document.getElementById("v5").onclick = function(){document.location = "pagina5";};
}
var enlace6 = document.getElementById("v6");
if(enlace6){
document.getElementById("v6").onclick = function(){document.location = "pagina6";};
}
var enlace7 = document.getElementById("v7");
if(enlace7){
document.getElementById("v7").onclick = function(){document.location = "pagina7";};
}
var enlace8 = document.getElementById("v8");
if(enlace8){
document.getElementById("v8").onclick = function(){document.location = "pagina8";};
}
var enlace9 = document.getElementById("v9");
if(enlace9){
document.getElementById("v9").onclick = function(){document.location = "pagina9";};
}
var enlace10 = document.getElementById("v10");
if(enlace10){
document.getElementById("v10").onclick = function(){document.location = "pagin10";};
}
var enlace11 = document.getElementById("v11");
if(enlace11){
document.getElementById("v11").onclick = function(){document.location = "pagina11";};
}
var enlace12 = document.getElementById("v12");
if(enlace12){
document.getElementById("v12").onclick = function(){document.location = "pagina12";};
}
¿Algún problema?
  #8 (permalink)  
Antiguo 06/08/2019, 09:31
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.543
Antigüedad: 11 años, 8 meses
Puntos: 1084
Respuesta: Eventos onclick fallan por falta de id

Si, 2 problemas

1.- tu actitud

2.- las cochinadas que haces con tu código.

Con tu actitud no dan muchas ganas de ayudarte, así que solo te daré el consejo te toca decidir si implementarlo o no.


Por lo que se ve en el escaso código que publicas estas cometiendo un error tremendo al utilizar <section> en lugar de <a>, si tu intención es crear una serie de tarjetas o productos, que al darle click te lleve a una sección de tu sitio, debes utilizar enlaces <a> de esa forma google podra indexar los contenidos adecuadamente.


Si insistes en usar javascript en lugar de llamar a cada elemento por el ID, utiliza una clase para que traigas todos los elementos existentes en lugar de tener que estar declarando una función tras otra.

utiliza el atributo data para fijar la URL de destino, de esa forma podrás obtenerla dinamicamente.
  #9 (permalink)  
Antiguo 06/08/2019, 10:04
 
Fecha de Ingreso: noviembre-2005
Mensajes: 883
Antigüedad: 14 años
Puntos: 8
Respuesta: Eventos onclick fallan por falta de id

Primeramente mi actitud parece haber sido malentendida. Si no coloqué el código completo es para no haceros perder el tiempo con temas que no son directamente relacionados con javascript.

El problema es que el enlace ya está incluido en el título.

Se me olvidó colocar el enlace en sí:

Código:
<section id="ventanas">

<section id="v1">
   <h3><a href="pagina1">Título 1...</a></h3>					 
      <p>Párrafo..............................</p>						
</section>

<section id="v2">
   <h3><a href="pagina2">Título 2...</a></h3>					 
      <p>Párrafo..............................</p>						
</section>

<section id="v3">
   <h3><a href="pagina3">Título 3...</a></h3>					 
      <p>Párrafo..............................</p>						
</section>

...

</section>
Los títulos ocupan todo el espacio de las secciones "v" (por ventana) con un fondo traslúcido por aplicación de opacity: 0.9, y el párrafo se superpone encima tras una animación por CSS.

La idea es que el usuario pueda pulsar sobre cualquier lugar de la ventana para ser conducido a la página.

Pasado el cursor por encima de una de esas ventanas, se mueve el título hacia arriba y sube el párrafo explicativo de exactamente 240 caracteres. El problema es que al estar el párrafo encima del título en el contexto de apilamiento, si pasas el cursor sobre el texto no deja pulsar el enlace dentro de h3.

No se puede utilizar z-index para traer el enlace al frente porque entonces no se ve el párrafo al quedar detrás de la lámina de fondo del título.

Todo esto no tiene más discusión porque entraña además un problema a la hora de la responsividad y no se va a tocar. La utilización de elemento section es correcta, el título y párrafo también, y la ubicación del enlace también está en su lugar, que es precisamente el título por lógica y SEO.

El enlace funciona en toda la ventana salvo en el espacio ocupado por el párrafo, así que la idea es recurrir a js para crear otro enlace que cubriera el problema sin tener que tocar nada más.

No se va a usar class porque además cada ventana tiene un fondo de imagen y porque deben ser individualizadas por una cuestión con otra parte de la página que no tiene nada que ver con esta discusión.

La identificación de elementos comunes a las ventanas ya se hace por especificación en css.

Y utilizar el atributo data para fijar la URL de destino y obtenerla dinamicamente me parece complicar las cosas más. Se trata de una página estática con las menores complicaciones posibles pero que sí tiene problemas de diseño, como por ejemplo que esas ventanas se colocan horizontalmente en dos filas de cuatro que tienen que tener exactamente el mismo ancho para hacer juego con elementos que hay encima y debajo. Exactitud que debe mantenerse en la responsividad.

Son todos temas de diseño que no viene al caso discutir porque todo esto no es un problema de javascript, que ya quedó claro en el primer post: fallo de sucesivos eventos onclick por falta de elementos en el código si se quiere utilizar el mismo archivo js para todo el sitio web, partiendo de que no voy a cambiar el html.

Última edición por JUMASOL; 06/08/2019 a las 10:37
  #10 (permalink)  
Antiguo 06/08/2019, 10:47
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.543
Antigüedad: 11 años, 8 meses
Puntos: 1084
Respuesta: Eventos onclick fallan por falta de id

Ves como explicando mas sobre el panorama se puede llegar a algo mejor, aunque insisto que mostrar tu código completo es esencial siempre que preguntas algo.

Esta seria mi solucion para no tener que estar declarando y hacer chorrocientas lineas de codigo cada que se quiera agregar algo nuevo

Código Javascript:
Ver original
  1. let sections = document.querySelectorAll('#sections>section');
  2. sections.forEach(function(section){
  3.     section.addEventListener('click', function(){
  4.     let titulos = this.getElementsByTagName('h1'),
  5.     enlaces = titulos[0].getElementsByTagName('a'),
  6.     url = enlaces[0].getAttribute('href');
  7.     window.location.href = url;
  8.   });
  9. });
  #11 (permalink)  
Antiguo 06/08/2019, 11:00
 
Fecha de Ingreso: noviembre-2005
Mensajes: 883
Antigüedad: 14 años
Puntos: 8
Respuesta: Eventos onclick fallan por falta de id

Gracias pero lo que no entiendo es cómo se individualiza la url que corresponde a cada ventana.
  #12 (permalink)  
Antiguo 06/08/2019, 14:42
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.543
Antigüedad: 11 años, 8 meses
Puntos: 1084
Respuesta: Eventos onclick fallan por falta de id

Este es un código de ejemplo que no va a funcionar con un copy-paste

Debes leerlo paso a paso para que entiendas el proceso y flujo que lleva.

como te darás cuenta, voy a un selector que me obtiene un NodeList con todas las ventanas, voy avanzando nodo por nodo hasta llegar al <a href=""> de ese obtengo el valor del href y vuala ya esta.
  #13 (permalink)  
Antiguo 06/08/2019, 16:51
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.543
Antigüedad: 11 años, 8 meses
Puntos: 1084
Respuesta: Eventos onclick fallan por falta de id

Por cierto, no te interesa llevar este tema a CSS en lugar de Javascript?

Si lo hicieras en CSS bastaría con agregar a tu párrafo el atributo
Código CSS:
Ver original
  1. #selector articulo p{pointer-events: none;}
  #14 (permalink)  
Antiguo 07/08/2019, 06:30
 
Fecha de Ingreso: noviembre-2005
Mensajes: 883
Antigüedad: 14 años
Puntos: 8
Respuesta: Eventos onclick fallan por falta de id

pointer-events: none; presenta fallos en diversos navegadores - incluyendo versiones modernas. Sería buena solución (la mejor) si tuviese una inserción en todos ellos. Ya de entrada, tal y como está diseñado el sistema de ventanas (que no voy a cambiar por lo expuesto) no funciona ni en Chrome ni en Edge.

En cualquier caso, lo he incluido para el párrafo.
  #15 (permalink)  
Antiguo 07/08/2019, 06:41
 
Fecha de Ingreso: noviembre-2005
Mensajes: 883
Antigüedad: 14 años
Puntos: 8
Respuesta: Eventos onclick fallan por falta de id

En cuanto al código js de arriba, supongo que estará bien hecho pero el caso es que a mí no me funciona de ninguna manera.

Ten en cuenta que los títulos van en mayúscula y con acentos, las url en minúscula y sin acentos. Podría ser ese el error. No lo sé.
  #16 (permalink)  
Antiguo 07/08/2019, 09:55
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.543
Antigüedad: 11 años, 8 meses
Puntos: 1084
Respuesta: Eventos onclick fallan por falta de id

Vale me rindo, el código que te puse funciona y no importa si el titulo es mayúscula o lo que quieras, igual los enlaces... se ataca directamente a las tags.

Lo que si, es que has de leer el código, entenderlo y adaptarlo a tu caso, como regla general, no debes tomar las cosas con un simple copy-paste

Sobre todo cuando no haz cedido a mostrar tu código completo., todo ha sido un juego de adivinanzas, divertido cuando se tiene tiempo.... hoy ya no es el caso.

De cualquier forma, mucha suerte!

Saludos.


PS: la compatibilidad de pointer-events ya no presenta fallos eso era en tiempos arcaicos,
https://caniuse.com/#search=pointer-events

Falla si, pero es con versiones muy viejas de los navegadores que ya no debería suponer ninguna preocupación, que claro esta, todo depende del sector al que este orientado tu proyecto, pero de entrada yo ya dejo de lado esos navegadores.
  #17 (permalink)  
Antiguo 08/08/2019, 03:09
 
Fecha de Ingreso: noviembre-2005
Mensajes: 883
Antigüedad: 14 años
Puntos: 8
Respuesta: Eventos onclick fallan por falta de id

Ya te digo que incluí pointer-events en el código, pero te invito a que leas los Known issues (5) de Can I Use en este punto. A mí me da fallo en varios navegadores. Ten en cuenta que para ciertas configuraciones y diseños falla.

Lo he incluido porque siempre hace algún servicio y en el futuro cercano se irá mejorando la compatibilidad (supongo).
  #18 (permalink)  
Antiguo 08/08/2019, 07:49
Avatar de Panino5001
Moderatroll
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.098
Antigüedad: 15 años, 5 meses
Puntos: 790
Respuesta: Eventos onclick fallan por falta de id

Aún a riesgo de ampliar la confusión, te sugiero investigar acerca de delegación de eventos:
https://davidwalsh.name/event-delegate
  #19 (permalink)  
Antiguo 08/08/2019, 08:48
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.543
Antigüedad: 11 años, 8 meses
Puntos: 1084
Respuesta: Eventos onclick fallan por falta de id

Known issues (5)
Cita:
Does not work on links in IE11 and Edge 17 and below unless display is set to block or inline-block, or position is set to absolute or fixed.
Y el problema es? si un elemento se superpone a otro lo mas seguro es que tenga position en absolute o fixed.

Igual vuelve a resalta la ausencia de tu código, puras adivinanzas y tiros a lo loco.
  #20 (permalink)  
Antiguo 08/08/2019, 09:10
 
Fecha de Ingreso: noviembre-2005
Mensajes: 883
Antigüedad: 14 años
Puntos: 8
Respuesta: Eventos onclick fallan por falta de id

No importa Arturo, ya te he dicho que incluí pointer-events en mi css, pero que voy a meter también un javascript por si acaso y para cubrir navegadores como IE 10 y otros, y los casos comentados.

Ese tema está resuelto.
  #21 (permalink)  
Antiguo 08/08/2019, 09:21
 
Fecha de Ingreso: noviembre-2005
Mensajes: 883
Antigüedad: 14 años
Puntos: 8
Respuesta: Eventos onclick fallan por falta de id

Cita:
Iniciado por Panino5001 Ver Mensaje
Aún a riesgo de ampliar la confusión, te sugiero investigar acerca de delegación de eventos:
https://davidwalsh.name/event-delegate
Gracias, ya lo he leído. Esto de js es un mundo.



La zona horaria es GMT -6. Ahora son las 11:42.