How can I take live input from a form, and print it?

Question

I have seen similar questions answered, but they are being printed to an input attribute as seen Here

<input type="text" id="field1">
<input type="text" id="field2">
<script>
document.getElementById("field1").onkeyup = function() {
document.getElementById("field2").value = this.value; 
}
</script>

but I want to print to text for a live demo of an email.

Answer 1

Here you are, just change the input for a span and ".value" for "innerHTML"

<input type="text" id="field1">
<span id="span"></span>
<script>
    document.getElementById("field1").onkeyup = function() {
        document.getElementById("span").innerHTML= this.value; 
    }
</script>

Answer 2

You'll want to set an event listener. 'change' is the event you'll want to listen for: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event

document.getElementById("field1").addEventListener('change', ({target: {value}}) => {
  document.getElementById("some-element").innerHTML = value; 
});

Answer 3

You can just show the text field contents in a div.

<input id="input" type="text"/>
<div id="output"></div>

<script>
   document.getElementById("output").innerHTML = document.getElementById("input").value;
</script>