如何在 javascript 中使用.textContent 獲取用戶輸入並在屏幕上顯示問候語？

Question

早上好，

我有一個 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 操作和事件處理程序的新手。 有人可以解釋我哪里出錯了嗎？

太感謝了： ：）

Answer 1

這是因為單擊按鈕后頁面會重新加載。 您可以使用 prevent default 來避免這種情況。

您可以像這樣在 function 中添加阻止默認值：

function greetingUser(event) {
    event.preventDefault()
    greet.textContent = `Nice to meet you, ${input.value}!`
}

Answer 2

問題是您使用了<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>

Answer 3

您不必更改標記，但在事件 object 上插入對 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}!`
}