How do I display innerhtml or textcontent as an event listener without flickering

Question

0.00/5 (No votes)

See more:

I'm learning JS. I'm trying to do a simple task: take the value from an input and then display it in a paragraph. However, when I do that the text flickers and disappears. Why? Also console.log(userName.value) doesn't work either. Please, help.

HTML

<pre> <form>
    <label for="userName"
      >What's your name?
      <input type="text" id="userName" />
    </label>
    <button class="btn">Submit</button>
  </form>
  <p class="demo"></p>

JavaScript

  const userName = document.querySelector("#userName");
  const demo = document.querySelector(".demo");
  const btn = document.querySelector(".btn");

btn.addEventListener("click", function(){
    demo.textContent = "Hello," + userName.value;
    console.log(userName.value);
})

What I have tried:

I tried to change demo.innerHTML but the effect is the same.
It's so frustrating when a simple code doesn't work.

Posted 18-Oct-22 7:15am

Tom-learning-to-code

Updated 19-Oct-22 1:47am

v2

Add a Solution

Comments

Member 15627495 19-Oct-22 2:24am

hello,

with the button tags, the form tag become deprecated.

'form tag' fires a reload/refresh of your web page.

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2022-10-19T01:47:00

As Member 15627495 hinted at in the comments, clicking the button submits the form, which will cause the page to reload and lose any changes made by your script.

You either need to change the button to type="button", or prevent the form from being submitted.

For example:

HTML

<form>
    <label for="userName">
        What's your name?
        <input type="text" id="userName" />
    </label>
    <button type="button" class="btn">Submit</button>
</form>
<p class="demo"></p>

JavaScript

const userName = document.querySelector("#userName");
const demo = document.querySelector(".demo");
const btn = document.querySelector(".btn");

btn.addEventListener("click", e => {
    e.preventDefault();
    demo.textContent = `Hello, ${userName.value}`;
    console.log(userName.value);
});

Demo[^]

How do I display innerhtml or textcontent as an event listener without flickering

1 solution

Solution 1

Add your solution here

Preview 0

How do I display innerhtml or textcontent as an event listener without flickering

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us