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