I could not perform the output of the value written to the input at the bottom-CodePudding

I want to see the input in a project and get the output at the same time. They did this only in the so-called way. But I want the output of my buttonless post. how to do?

<input type="text" id="myText">
<button type="button" onclick="myFunction()">Try it</button>
<p id="demo"></p>

  
<script>
  
// Here the value is stored in new variable x 
function myFunction() {
    var x = document.getElementById("myText").value;
    document.getElementById("demo").innerHTML = x;
}
</script>

CodePudding user response：

You can achieve your goal by using input_event on the input tag, like this:

let demo = document.getElementById('demo');
document.getElementById('myText').addEventListener('input',function(){
  demo.innerHTML= this.value;
})

#demo{ 
  background: #eee;
  min-height:20px;
}

<input type="text" id="myText">
<p id="demo"></p>

CodePudding user response：

You should try to add an EventListener so every time the input changes the function will run.

Just add the following, I think it will work fine.

document.addEventListener('keydown', myFunction);

So on every key pressed the x variable will be assigned the current input.