如何在 javascript 中使用 .textContent 获取用户输入并在屏幕上显示问候语？答案

【问题标题】：How do I take a users input and display a greeting on the screen using .textContent in javascript?如何在 javascript 中使用 .textContent 获取用户输入并在屏幕上显示问候语？
【发布时间】：2022-01-17 18:18:00
【问题描述】：

早上好，

我有一个 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 操作和事件处理程序的新手。有人可以解释我哪里出错了吗？

非常感谢！ :)

【问题讨论】：

标签： javascript html function dom event-handling

【解决方案1】：

这是因为点击按钮后页面会重新加载。您可以使用 prevent default 来避免这种情况。

您可以像这样在函数中添加阻止默认值：

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

您不必更改标记，但在事件对象上插入对 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}!`
}

【讨论】：