I want the to get the input value and for it to replace a part of the P tag text.
Please see my code below:
<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>What I'm hoping to achieve is, if a user entered their nickname in the input, it will replace the default text inside the paragraph tag from "Welcome, stranger" to "Welcome, (insert user input)"
Right now, it's replacing the whole document instead of just the p tags.
Extra question (if possible): How do I store the user's input into the local storage so on their next visit, their name will still be there in the replaced paragraph text?
Thank you in advance! I'm just learning JS..
localStorage and if it exists, set the text// 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>