1

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..

ixcode
  • 611
  • 8
  • 17

1 Answers1

2
  1. Write a function to set the text in the paragraph
  2. Get the value from localStorage and if it exists, set the text
  3. Add a change event listener to handle the user input that can set the paragraph text and save the value into local storage

// 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>
Phil
  • 157,677
  • 23
  • 242
  • 245
  • Thank you very much for your time answering my query! This answer is what I'm looking for. Just one last thing if it's okay, it seems there's a minor problem in the local storage part, cause the text is stuck into "Welcome, stranger" on refresh even if there's a user input? Again, thank you thank you! – ixcode Mar 23 '22 at 04:30
  • 1
    @ixcode `localStorage` doesn't work in the Stack Snippet, that's why I have a fake version in my answer. You're not meant to include the first line if you're directly using this code – Phil Mar 23 '22 at 04:32
  • Oh wow, it's working like a charm... Now time to study how you did it and replicate it for other use case. Thank you kindly! ^^ – ixcode Mar 23 '22 at 04:35