Estoy tratando de hacer una aplicación web de prueba con javascript y estoy atascado. Hay 2 archivos HTML, uno como starter.html y otro como index.html . Tengo una entrada en mi archivo de inicio que incluye un nombre de usuario que quiero mostrar más tarde en el sitio de índice como:
alert(`Congrats ${playerName} you got all the questions right!`)y un enlace de "enviar" que lo lleva al siguiente sitio y almacena una variable como esta:
<input type="text" id="username" placeholder="Enter your name"/> <a id="startGame" href="index.html">Start Game</a> const inputArea = document.querySelector("#username"); const startButton = document.querySelector("#startGame"); var saveUsername = function () { var playerName = inputArea.value; };¿Cómo puedo acceder a la variable playerName desde index.html ? En primer lugar, tenía la intención de usar un archivo js global, pero extraño algunos elementos declarados ya que tengo dos archivos html separados y no encuentra los elementos durante la manipulación DOM (no se pueden leer las propiedades de nulo). Intenté usar dos archivos js separados, pero no pude encontrar la solución para acceder a los datos de un archivo javascript y almacenarlos en el segundo.
¿Algunas ideas?
Puede usar localStorage para ese propósito. Cuando un usuario ingresa su nombre en el cuadro de texto, puede guardar el valor en localStorgae y buscar el valor en la página de índice.
const usernameInputField = document.querySelector('#username'), button = document.querySelector('button'); button.addEventListener('click', () => { if (usernameInputField.value != "") { localStorage.setItem('user', usernameInputField.value); } alert('Username Saved Successfully. Starting the game...'); }) <input type="text" id="username" placeholder="Enter your name" /> <button>Start Game</button>y para recuperar el valor, simplemente use
if(localStorage.getItem != null && localStorage.getItem('user') != "") { console.log(localStorage.getItem('user')); // here you can set the name as innerText of some element }Puede consultar esto aquí https://jsfiddle.net/za01kp46/