Search code examples
javascriptaddeventlistenerkeyup

JavaScript copy Input value to innerHTML on keyup (addEventListener)

As the title says: I want to copy the input value to an html element (in realtime). I've tried something like this, but it's not working... THX in advance!

<input type="text" id="test" value="">

<p id="box"></p>


<script type="text/javascript">

document.getElementById('test').addEventListener('keyup', function () {

document.getElementById('box').innerhtml = document.getElementById('test').value;

});

</script>
Solution

  • Like Geuis said (post comment), your mistake is innerHTML (and not innerhtml), see : https://codesandbox.io/s/724r405wo1

    I would encourage you to change your code to :

    var box = document.getElementById('box')

document.getElementById('test').addEventListener('keyup', function (event) {
    box.innerHTML = event.target.value
});

    So you do not query the dom every time.