Input type with id 'typehere'. There is a keydown event set on typhere. The simple problem is that e.srcElement.value seems to have a value one key behind. i.e. if the value should 's' , its consoled'logged as blank '' . If I type 'ss' , the value shown is 's' . I can't seem to figure this one out.

console.log(e), shows the correct value of e.srcElement.value (in the console), but console.log(e.srcElement.value) shows the wrong value. Why?

<script type="text/javascript">
            var xmlHttp = createXmlHttpRequestObject();
            selectOption = document.getElementById('choose_colony') ;

            document.body.onload = function () {
                typehere = document.getElementById('typehere') ;

                addAnEvent(typehere,"keydown",handleKeyDownevent,false )  ;
            }

            function handleKeyDownevent (e) {
                e = e || window.event ;
                if (xmlHttp) {
                    try {
                        //xmlHttp.open('GET' , 'async.txt', true ) ;
                           console.log(e.srcElement.value ) ;
                       var target=  e.target || e.srcElement ;
                        var typed = target.value      ;
                        if (typed != ""){
                            console.log('sennding request') ;
                            //ajax request
                        }
                        else {
                            console.log(e.srcElement.value + "is blank") ;
                        }
                    }
                    catch(e) {
                        console.log('could not connect to server') ;
                    }
                }

            }
</script>

The script tag are before the </body> tag btw

Input type with id 'typehere'. There is a keydown event set on typhere. The simple problem is that e.srcElement.value seems to have a value one key behind. i.e. if the value should 's' , its consoled'logged as blank '' . If I type 'ss' , the value shown is 's' . I can't seem to figure this one out.

console.log(e), shows the correct value of e.srcElement.value (in the console), but console.log(e.srcElement.value) shows the wrong value. Why?

<script type="text/javascript">
            var xmlHttp = createXmlHttpRequestObject();
            selectOption = document.getElementById('choose_colony') ;

            document.body.onload = function () {
                typehere = document.getElementById('typehere') ;

                addAnEvent(typehere,"keydown",handleKeyDownevent,false )  ;
            }

            function handleKeyDownevent (e) {
                e = e || window.event ;
                if (xmlHttp) {
                    try {
                        //xmlHttp.open('GET' , 'async.txt', true ) ;
                           console.log(e.srcElement.value ) ;
                       var target=  e.target || e.srcElement ;
                        var typed = target.value      ;
                        if (typed != ""){
                            console.log('sennding request') ;
                            //ajax request
                        }
                        else {
                            console.log(e.srcElement.value + "is blank") ;
                        }
                    }
                    catch(e) {
                        console.log('could not connect to server') ;
                    }
                }

            }
</script>

The script tag are before the </body> tag btw

• javascript
• dom-events

3 Answers 3

(For typeable characters, you typically want keypress rather than keydown as keypress repeats.)

keydown is fired before the value has changed (as does keypress), not least so you can cancel the keypress, so if you want to process the value after it's changed, you may want to defer your call using setTimeout(func, 0). Your call will get processed after the event chain unwinds. (Typically within 5-10 milliseconds.)

Live example

So in your code, that might look like this:

addAnEvent(typehere,"keydown",function(e) { // or "keypress"
    e = e || window.event;
    setTimeout(function() {
        handleKeyDownevent(e);
    }, 0);
},false )  ;

use keyup event instead of keydown.

The simple answer lies in the fact that when you are trying to determine the value of a variable that is within an event, it is processed by an event handler, and therefore it is best to simply log the event itself. So you could try modifying your code to acmodate for that, to see if helps. Also, I disagree with above answer about needing to set/include a time-out (function), unless you are trying to cancel any keystrokes, etc. To clarify:

<script type="text/javascript">
        var xmlHttp = createXmlHttpRequestObject();
        selectOption = document.getElementById('choose_colony') ;

        document.body.onload = function () {
            typehere = document.getElementById('typehere');
            addAnEvent(typehere, "keydown", function(e) { 
                e = e || window.event;
                handleKeyDownevent(e);}, false);
        }
function handleKeyDownevent (e) {
            e = e || window.event ;
            if (xmlHttp) {
                try {
                    //xmlHttp.open('GET' , 'async.txt', true ) ;
                       console.log(e.srcElement.value ) ;
                   var target=  e.target || e.srcElement ;
                    var typed = target.value      ;
                    if (typed != ""){
                        console.log('sennding request') ;
                        //ajax request
                    }
                    else {
                        console.log(e.srcElement.value + "is blank") ;
                    }
                }
                catch(e) {
                    console.log('could not connect to server') ;
                }
            }
          return true;
        }
</script>

I hope that helps you out. The return true at the bottom allows the browser's default response.