Tengo una entrada de nombre en 1.html. Necesito llamar a una función donde la entrada se almacenará después de completarse, y cuando la persona haga clic en ~siguiente~ para ir a la página siguiente (2.html), todo lo que se almacenó aparecerá allí. Ejemplo:
~1.html~
¿Cuál es tu nombre? ~entrada~ Juan ~entrada~
~2.html~
¡Hola, Juan! ¿Cómo puedo ayudarte?
Sé que puedo usar Session Storage para hacerlo, pero no estoy seguro de cómo proceder. Esto es lo que tengo:
1.html
<p>"Whats Your Name?"</p> <input id="your-name-input" type="text"> <a href="2.html"> <button id="next-button">Next</button> <script> nextButton = document.getElementById("next-button); nextButton.addEventListener("click", () => { var name = document.getElementbyId("your-name-input").value; if(name !== "") { sessionStorage.setItem("name", name); } else { alert("Please fill yout name") }); </script>Y luego, en 2.html tengo:
<p id="user-name"></p> Lo que estoy tratando de hacer es poner dentro del <p> , el siguiente saludo: Hola (nombre.valor), ¿cómo puedo ayudarte?
¿Cómo puedo llamar a una función que carga el valor del nombre en la página 2.html cuando se carga la página?
El siguiente código debería funcionar. Faltan algunas cosas en su código, no estoy seguro si copió todo.
En cualquier caso, lo siguiente funciona para mí. Solo necesita actualizar el enlace en la sintaxis window.location = . Cuando haga eso, llevará su valor almacenado a la nueva página en la misma pestaña y lo mostrará usando el código de secuencia de comandos en 2.html.
Código en 1.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" /> <title>Your name test</title> </head> <body> <p>Whats Your Name?</p> <input id="your-name-input" type="text"> <button id="next-button">Next</button> <script> const nextButton = document.getElementById("next-button"); const input = document.getElementById("your-name-input"); nextButton.addEventListener("click", () => { const name = input.value; if(name !== "") { sessionStorage.setItem("name", name); window.location = "<link to your 2.html file>"; } else { alert("Please fill your name") } }); </script> </body> <footer> </footer> </html> Código en 2.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" /> <title>See, it works</title> </head> <body> <p id="user-name"></p> <script> const displayText = document.getElementById("user-name"); const storedValue = sessionStorage.getItem("name"); console.log(storedValue); window.addEventListener("load", () => { displayText.innerHTML = "Hi " + storedValue; }) </script> </body> <footer> </footer> </html>Respuesta original a la pregunta original:
Podría usar un addEventListener con una declaración IF para su botón 'siguiente' y luego el código que ya tiene para localStorage.
Dependiendo de lo que necesite de su página, también puede usar sessionStorage, que no guarda la entrada para siempre, por lo que podría ahorrar, aunque sea de forma limitada, espacio en la computadora de su usuario.
Todavía no veo el código HTML de su botón. Pero suponiendo que lo tenga, aquí hay una opción para el resto de su código en 1.html.
Dentro de la etiqueta del script 1.html:
nextButton = document.getElementById("yourButtonID"); nextButton.addEventListener("click", () => { var name = document.getElementById("your-name-input").value; if(name !== "") { // if input is not empty localStorage.setItem("name", name); // set the value in localStorage } else { alert("Please fill your name")} // else, display an alert (if you like) });