How do I take a users input and display a greeting on the screen using .textContent in javascript?-CodePudding

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! :)

CodePudding user response：

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

CodePudding user response：

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>

CodePudding user response：

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