早上好，
我有一個 HTML 檔案，詢問用戶他們的名字后跟一個文本框和按鈕。
這是我的 HTML
<form>
<p>What's your name?</p>
<input id="input" type="text" placeholder="Dwayne Johnson..." />
<button id="button">Click Me</button>
<p id="greet"></p>
</form>
然后我有我的 javascript，它從用戶那里獲取輸入（名稱）并在螢屏上顯示一條訊息。
這是我的 Javascript
let input = document.getElementById("input");
let button = document.getElementById("button");
let greet = document.getElementById("greet");
// function to greet user (homepage)
button.addEventListener ("click", greetingUser);
function greetingUser() {
greet.textContent = `Nice to meet you, ${input.value}!`
}
如果我輸入名稱，它將顯示訊息一秒鐘，然后立即從螢屏上消失。
我很欣賞這是一個非常簡單的問題，但我發現它很棘手。我是 DOM 操作和事件處理程式的新手。有人可以解釋我哪里出錯了嗎？
太感謝了！:)
uj5u.com熱心網友回復：
這是因為單擊按鈕后頁面會重新加載。您可以使用 prevent default 來避免這種情況。
您可以像這樣在函式中添加阻止默認值：
function greetingUser(event) {
event.preventDefault()
greet.textContent = `Nice to meet you, ${input.value}!`
}
uj5u.com熱心網友回復：
問題是您使用了 a <form>，該表單將提交并導致問題，如果您只需要顯示名稱，請不要使用如下表單：
let input = document.getElementById("input");
let button = document.getElementById("button");
let greet = document.getElementById("greet");
// function to greet user (homepage)
button.addEventListener("click", greetingUser);
function greetingUser() {
greet.textContent = `Nice to meet you, ${input.value}!`
}<p>What's your name?</p>
<input id="input" type="text" placeholder="Dwayne Johnson..." />
<button id="button">Click Me</button>
<p id="greet"></p>另一方面，如果您需要顯示名稱，然后使用必須使用的另一個按鈕發送表單，preventDefault()例如：
let input = document.getElementById("input");
let button = document.getElementById("button");
let greet = document.getElementById("greet");
// function to greet user (homepage)
button.addEventListener("click", greetingUser);
function greetingUser(e) {
e.preventDefault();
greet.textContent = `Nice to meet you, ${input.value}!`
}<form>
<p>What's your name?</p>
<input id="input" type="text" placeholder="Dwayne Johnson..." />
<button id="button">Click Me</button>
<p id="greet"></p>
</form>uj5u.com熱心網友回復：
您不必更改標記，但在事件物件上插入對 preventDefault() 方法的呼叫應該會阻止提交表單。
let input = document.getElementById("input");
let button = document.getElementById("button");
let greet = document.getElementById("greet");
// function to greet user (homepage)
button.addEventListener ("click", greetingUser);
function greetingUser(event) {
event.preventDefault();
greet.textContent = `Nice to meet you, ${input.value}!`
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/413829.html
標籤：