Así que tengo dos archivos html y ambos están vinculados a otro y comparten el mismo archivo css/js. cuando uso un btn en un index.html y hago clic en él, quiero que vuelva a agregar algo a una sección/div en index2.html. Tengo el código, pero por alguna razón, cuando lo ejecuto, aparece un error, así que consola. Lo registré y devuelve nulo. ¿Cómo accedo a los elementos de otro archivo html? ¿Necesito importar eso en js? índice:
<a href="index.html">home</a> <a href="test.html">test</a> <button class="btn" onclick="add()">addP</button>índice2:
<a href="index.html">home</a> <a href="test.html">test</a> <h1>add p below </h1> <div class="pbox"> </div>Quiero acceder al div.pbox
Te enfrentas a algunos problemas aquí. En la página de inicio no hay un pbox y en la página de prueba no hay un add button , esto es bastante fácil de resolver con un condicional para ver si existen o usando 2 archivos JavaScript.
El siguiente problema al que te enfrentas es cómo almacenas la información y la pasas de una página a otra. Una vez que la página se vuelve a cargar, la información simplemente desaparecerá. La respuesta en este caso sería el almacenamiento local.
Cuando la página se carga, comprueba la existencia de una lista en el almacenamiento local. Si existe, obtiene esa información y la analiza. Si no existe, es solo una matriz vacía. Esto sucede en ambas páginas porque ambas necesitan esta información.
Cuando se carga la página de prueba, simplemente toma la información de la lista y la mapea para completar el cuadro de pbox con lo que esté en la lista en ese momento.
En la página de inicio, una vez que se hace clic en el botón, empuja el nuevo elemento a la matriz de listas y luego actualiza el almacenamiento local.
Aquí está el enlace de Sandbox