html element is not updating depending on input value

Question

I have a <p>element that should contain whatever is written in the <input> box. The <p> does contain everything there is in <input> except the last character.

For example, (not valid JS code)

 if input = Fish 
    then p = Fis

if input = Monster
    then p = Monste

Here is my code

    <head>
        <script>
            window.onload = function()
            {
                document.querySelector('input').addEventListener('keydown', function()
                {
                    document.querySelector('p').innerHTML = document.querySelector('input').value
                });
            }
        </script>
    </head>
    <body>
        <p></p>
        <input type="text" />
    </body>

How do I make the p element contain even the last character in the input?

Paul · Accepted Answer · 2017-08-29 15:17:57Z

3

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/

edited Aug 29, 2017 at 15:17

answered Aug 29, 2017 at 15:16

Paul

36.4k12 gold badges98 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

trincot Over a year ago

Better event is input.

Paul Over a year ago

"Better" is subjective term, but yes it's also an option.

CoursesWeb · Accepted Answer · 2017-08-29 15:30:28Z

1

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

<p id='id_p'></p>
<input type="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>

answered Aug 29, 2017 at 15:30

CoursesWeb

4,2573 gold badges24 silver badges27 bronze badges

Collectives™ on Stack Overflow

html element is not updating depending on input value

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related