DIsplay text in HTML

I want to display text in aspan.
The text comes from the user who puts it into aninput field.

This is the HTML with the input field:

Some copy on the website

This is the HTML for the span with the ID

  <div class="box box3">
      Some copy on the website <span id='text'>this shiould be changed </span>some copy on the website
    </div>

This is the JS

let a = document.getElementById("geld");
a.addEventListener('input', () => console.log(a.value))
//a = parseInt(a, 10);
b = a.toString();
document.getElementById('text').innerHTML = b;

This code above leads to the message:
[object HTMLInputElement]

It’s not displaying the text, the user puts into the input fiel.

Than I tried:

let a = document.getElementById("geld");
a.addEventListener('input', () => console.log(a.value))
a = parseInt(a, 10);
document.getElementById('text').innerHTML = a;

(I converted the input into a number with parsInt.)

When executing this code, I get.

β€œNAN” in my HTML.

Could anyone explain whats happening and what I need to do, to get text displayed in my span?

Best,
S.

When you execute any statement outside a function it executes only when the app is first run. Your addEventListener setup a function to run whenever the input changes, so you can use that function to set the text of your span element.

let input = document.getElementById("geld");
let span = document.getElementById("text");

input.addEventListener("input", () => {
  document.getElementById('text').innerHTML = input.value;
});
1 Like