How to make a live preview of input element's in JavaScript?

Question

I want to make a live preview of input elements in HTML with the JavaScript. Like when use will write something in the field, it will automatically print the text under the field. So how can I make it? I have tried to make it in different ways. But every time I got undefined.

const showCase = document.querySelector('#Message')
const field = document.querySelector('#Field')

field.addEventListener('keyup', () => {
  field.addEventListener('keypress', () => {
    showCase.innerHTML = this.value
  })
})

Answer 1

You can try something like below.

const myInput = document.getElementById('input'); // Input Element with id="input" const myOutput = document.getElementById('output'); // An empty paragraph with id="output"

function handleInputKeypress(e) {
  myOutput.textContent = e.target.value;
}

myInput.addEventListener('keyup', handleInputKeypress);

Answer 2

const showCase = document.querySelector('#Message')
const field = document.querySelector('#Field')

// Listen for input event
field.addEventListener('input', e => {
    showCase.innerText = e.target.value
})

Answer 3

try this:

const showCase = document.querySelector('#Message')
const field = document.querySelector('#Field')

field.addEventListener('input', (e) => {
 showCase.innerHTML=e.target.value
})

<p id="Message"></p>
<input id="Field" type="text"/>