How to get input value and replace part of p-tag with the value using JS?

Question

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

this post may help you: stackoverflow.com/q/4618143/13099832 — ferJen
– ferJen, Commented Mar 23, 2022 at 4:04
@FerJen I don't see how that's relevant at all. Did you comment on the wrong post? — Phil
– Phil, Commented Mar 23, 2022 at 4:27

Phil · Accepted Answer · 2022-03-23 04:32:56Z

2

Write a function to set the text in the paragraph
Get the value from localStorage and if it exists, set the text
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>

edited Mar 23, 2022 at 4:32

answered Mar 23, 2022 at 4:17

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ixcode Over a year ago

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!

Phil Over a year ago

@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

ixcode Over a year ago

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! ^^

Collectives™ on Stack Overflow

How to get input value and replace part of p-tag with the value using JS?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related