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

Question

Good morning,

I have an HTML file that asks the user what their name is followed by a textbox and button.

Here is my 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>

I then have my javascript which takes the input (a name) from the user and displays a message on the screen.

Here is my 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}!`
}

If I enter a name it will display the message for a second and then immediately disappear from the screen.

I appreciate this is quite a simple problem, but I am finding it tricky. I am new to DOM manipulation and event handlers. Can someone explain where I am going wrong?

Thank you so much: :)

Answer 1

It's because the page reloads after the button was clicked. You can use prevent default to avoid that.

You can add prevent default in your function like this:

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

Answer 2

The problem is you used a <form> , that form will submit and it cause the problem, if you need only display the name don't use form like:

 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>

---

If, on the other hand, you need to display the name and then send the form with another button you have to use preventDefault() like:

 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

You don't have to change your mark-up, but inserting a call to the preventDefault() method on the event object should prevent the form from being submitted.

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}!`
}