[SOLUCIONADO] Eventos onclick fallan por falta de id

[JUMASOL]

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.

[ArturoGallegos]

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:

let v1 = ocument.getElementById("v1");
if(v1 !== undefined){
v1.onclick = function(){...}
}
 

[JUMASOL]

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.

[ArturoGallegos]

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.

[tuadmin]

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:

document.body.addEventListener('click',function(evento){
    if(evento.target.id){//si contiene un ID lo tomamos en cuenta
        if(evento.target.id.substr(0,1)=='v'){
            var es_numero=evento.target.id.substr(1);
            if(es_numero==parseInt(es_numero)){//es quiere decir que es del TIPO v1 v2 v121 etc
                document.location = "redireccion"+es_numero.toString();
            }
        }   
    }
});
 

[JUMASOL]

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.

[JUMASOL]

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?

[ArturoGallegos]

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.

[JUMASOL]

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.

[ArturoGallegos]

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:

let sections = document.querySelectorAll('#sections>section');
sections.forEach(function(section){
    section.addEventListener('click', function(){
    let titulos = this.getElementsByTagName('h1'),
    enlaces = titulos[0].getElementsByTagName('a'),
    url = enlaces[0].getAttribute('href');
    window.location.href = url;
  });
});
 

[JUMASOL]

Gracias pero lo que no entiendo es cómo se individualiza la url que corresponde a cada ventana.

[ArturoGallegos]

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.

[ArturoGallegos]

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:

#selector articulo p{pointer-events: none;}
 

[JUMASOL]

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.

[JUMASOL]

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é.

[ArturoGallegos]

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.

[JUMASOL]

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).

[Panino5001]

Aún a riesgo de ampliar la confusión, te sugiero investigar acerca de delegación de eventos:
https://davidwalsh.name/event-delegate

[ArturoGallegos]

Known issues (5)

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.

[JUMASOL]

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.

[JUMASOL]

Iniciado por Panino5001

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.