Quiero que obtenga el valor de entrada y que reemplace una parte del texto de la etiqueta P.
Por favor vea mi código abajo:
<input class="cyberpunk mt-3" id="strangers-name" placeholder="Nickname" type="text" onblur="getStrangerName()"/> <p id="welcome-stranger-note">Welcome, stranger</p> <script> function getStrangerName() { const user = document.getElementById('strangers-name').value; document.write("Welcome, " + user); } </script>Lo que espero lograr es que, si un usuario ingresó su apodo en la entrada, reemplazará el texto predeterminado dentro de la etiqueta del párrafo de "Bienvenido, extraño" a "Bienvenido, (insertar entrada del usuario)".
En este momento, está reemplazando todo el documento en lugar de solo las etiquetas p.
Pregunta adicional (si es posible): ¿Cómo almaceno la entrada del usuario en el almacenamiento local para que, en su próxima visita, su nombre siga estando allí en el texto del párrafo reemplazado?
¡Gracias de antemano! Estoy aprendiendo JS..
localStorage y, si existe, configure el texto // fake localStorage for snippet sandbox, just ignore // and definitely don't include it in your code const localStorage={getItem(...args){console.log("localStorage.getItem",...args)},setItem(...args){console.log("localStorage.setItem",...args)}} // Storage key name const STORAGE_KEY = "nickname"; // Grab a reference to the <p> element const welcome = document.getElementById("welcome-stranger-note"); // Sets the text within the welcome element const setNickname = (name) => { // See https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent welcome.textContent = `Welcome, ${name ?? "stranger"}` } // Add a "change" event listener document.getElementById("strangers-name").addEventListener("change", e => { const nickname = e.target.value.trim(); // Only set if not empty if (nickname) { setNickname(nickname); localStorage.setItem(STORAGE_KEY, nickname); } }); // Call setNickname with value from localStorage setNickname(localStorage.getItem(STORAGE_KEY)); <input id="strangers-name" placeholder="Nickname" /> <p id="welcome-stranger-note"></p>