我想要獲取輸入值并替換 P 標簽文本的一部分。
請在下面查看我的代碼：
<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>我希望實作的是，如果用戶在輸入中輸入了他們的昵稱，它會將段落標簽內的默認文本從“歡迎，陌生人”替換為“歡迎，（插入用戶輸入）”
現在，它正在替換整個檔案，而不僅僅是 p 標簽。
額外的問題（如果可能的話）：我如何將用戶的輸入存盤到本地存盤中，以便在他們下次訪問時，他們的名字仍然會出現在替換的段落文本中？
先感謝您！我只是在學習JS..
uj5u.com熱心網友回復：
- 撰寫一個函式來設定段落中的文本
- 從中獲取值
localStorage，如果存在，則設定文本 - 添加更改事件偵聽器來處理可以設定段落文本并將值保存到本地存盤的用戶輸入
// 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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/447498.html
標籤：javascript html jQuery