Display value in input in html

Question

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.

Answer 1

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

change from

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

to

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

Answer 2

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>