Html Element Is Not Updating Depending On Input Value

I have a

element that should contain whatever is written in the box. The

does contain everything there is in except the last characte

Solution 1:

By registering to the 'keydown' event, your logic is firing when the key is pressed down, but the input box's value isn't updated until after your finger comes off the button.

Try registering to 'keyup' instead.

<script>window.onload = function()
            {
                document.querySelector('input').addEventListener('keyup', function()
                {
                    document.querySelector('p').innerHTML = document.querySelector('input').value
                });
            }
        </script>

Fiddle: https://jsfiddle.net/cb457Lpt/

Solution 2:

If you want to remove the last character from input value, and to add the resulted string in a html element, try this code:

<pid='id_p'></p><inputtype="text"id='id_inp' /><script>var id_inp = document.querySelector('#id_inp');
id_inp.addEventListener('input', function(e){
  var str_inp = e.target.value;
  document.querySelector('#id_p').innerHTML = str_inp.replace(str_inp.substr(str_inp.length - 1), '');
});
</script>