Display value in input in html-CodePudding

I have the following code for html:

<label for="">Input</label>
<input type="text" name="" id="input_01" placeholder="Enter some text">

<label for="">Output</label>
<input type="text" name="" id="ouput_01">

<script>
    var input_01 = document.getElementById("input_01")
    var output_01 = document.getElementById("output_01")
    input_01.addEventListener('keyup',function(){
        output_01.value = input_01.value
    })
</script>

I want to display the input value as the output. However, I found that the command "output_01.value = input_01.value" doesn't work and there is nothing displayed. I do not know why and do not know how to solve this problem. How can I display the content of an input in 'ouput_01'? Thank you.

CodePudding user response：

make sure you don't have typo in your code.

change from

<input type="text" name="" id="ouput_01">

<input type="text" name="" id="output_01">

CodePudding user response：

your INPUT tag output ID does not match the one on your javascript DOM and this output_01.value = input_01.value is wrong, instead you should add event to your function parameter in your Event Listener then assign your event.target.value to your output DOM value

<label for="">Input</label>
<input type="text" name="" id="input_01" placeholder="Enter some text">

<label for="">Output</label>
<input type="text" name="" id="output_01">

<script>
var input_01 = document.getElementById("input_01")
var output_01 = document.getElementById("output_01")

input_01.addEventListener('keyup', function(event) {
 output_01.value = event.target.value
})
</script>