Estoy tratando de pasar el HTML interno de un evento de un archivo js a otro archivo js que está en una página html diferente. Esencialmente, estoy tratando de crear la ubicación del sitio que ves en los sitios web. home o home > some-other-page-after-home .
Mi html inicial tiene unos seis enlaces. Todos van a diferentes páginas que están estructuradas exactamente igual pero tienen nombres diferentes y tendrán información diferente en ellas. Así que estoy tratando de usar el mismo html para todos y no tener que hacer seis páginas html diferentes.
Entonces, lo que hice fue crear un detector de eventos que captura la palabra de cualquier enlace en el que se encuentre. Lo he registrado en la consola y funciona bien. Este es el hogar de este sitio. La siguiente capa del sitio es una de estas seis páginas que tienen el mismo aspecto.
Quiero que la página diga home > page1 o home > page2 en la página siguiente cuando haga clic en uno de los seis enlaces y quiero que el valor de página1 / página2 sea el valor que obtengo de este detector de eventos.
No sé si esta es una forma práctica de abordar este tipo de problema, pero fue la primera idea que se me ocurrió. Tengo mi detector de eventos que pasa su valor a un objeto y luego tengo ese objeto importado en otro archivo js al que está vinculado el otro html.
El problema es que cuando llego a la página siguiente, la propiedad del objeto {name: e.target.innerHTML} ya no tiene valor porque en el contexto de esa página, e.target.innerHTML ya no significa nada. O al menos creo que ese es el problema.
Aquí están los guiones.
elegir-foro.js
let forum = document.querySelector('.column'); export let forumInfo = { name: "" }; const getForumName = (e) => { forumInfo.name = e.target.innerHTML; console.log(forumInfo.name); } forum.addEventListener('mouseover', getForumName);página2.js
import { forumInfo } from "./choose-forum.js"; let forumNav = document.querySelector('.forumNav'); const onLoad = () => { forumNav.innerHTML = forumInfo.name; } window.addEventListener('load', onLoad); registro forumInfo.name dice
TypeError no capturado: no se pueden leer las propiedades de nulo (leyendo 'addEventListener'.
Supongo que eso se debe a que forumInfo.name es igual al destino del evento que activa el oyente en el otro archivo.
¿Alguien sabe una forma de evitar esto? También pensé en hacer que la barra de ubicación sea un componente de reacción, pero recientemente comencé a trabajar con reaccionar y no he aprendido rutas o cómo pasar información a diferentes páginas con reaccionar, así que pensé en ver si podía aparecer. con algo por mí mismo.
Me lo imaginé. Mi idea de por qué no funcionaba era correcta. HTML no tiene estado y eso. Encontré estas cosas ingeniosas llamadas almacenamientos front-end después de probar una cantidad absurda de cosas extremadamente complicadas para que funcionara jajaja. Solo tuve que reformular mi pregunta en Google para no mencionar las importaciones y exportaciones porque la solución no tiene nada que ver con las importaciones y exportaciones.
Editar:
Así que básicamente almacené el valor generado por mi objetivo de evento de mouseover en el almacenamiento local. Lo que me permitió acceder a su valor en otro archivo html sin usar importaciones y exportaciones que no guardan información de eventos de otras páginas. El mouse sobre obtiene el valor HTML interno de lo que sea que esté pasando y almacena ese valor en el almacenamiento local y luego configuro la barra de ubicación del sitio en la siguiente página html a ese valor en otro archivo js. Esto causa problemas si solo coloca la URL en la barra de búsqueda en lugar de hacer clic en ella, ya que nada está configurado para el almacenamiento local. O posiblemente el valor incorrecto se establece en el almacenamiento local en el momento en que navega allí. Así que encontré otra forma que no requiere almacenamiento local. Simplemente pongo todos los valores href en mi html en '/lo que sea' y luego creo una ruta de obtención para esa ruta que envía el archivo html que tengo como una especie de plantilla para todas estas páginas. Luego cambio la barra de ubicación del sitio en la parte superior de la página en función de la ubicación de la ventana mediante la manipulación y la extracción de solo la parte que necesito después de local: host5000 y establezco el valor en eso.