locked
Why Is Event Target Undefined? RRS feed

  • Question

  • I have the code below on a page.  When I make a keystroke in the textbox it says oTextbox.nodeName = "INPUT".  Perfect.  Then it says "oTextbox2.nodeName = undefined".  I'm probably missing something obvious here.  Can you tell me why the event target comes back undefined?

        function AllowNumbersOnly2(oEvent, oTextbox, bAllowDecimals) 
        {
                alert("oTextbox.nodeName = " + oTextbox.nodeName);
            var oTextbox2 = oEvent.target;
                alert("oTextbox2.nodeName = " + oTextbox2.nodeName);
            var bAllowEntry = AllowNumbersOnlySub(oEvent, bAllowDecimals, true, oTextbox);
            return bAllowEntry;
        }
    
    <input type="text" id="WSRIns" name="WSRIns" value="" onkeypress="return AllowNumbersOnly2(event, this, true);" >


    MCSD .NET developer in Dallas, Texas

    Wednesday, April 24, 2013 1:39 PM

Answers

  • Sounds like you are using Internet Explorer to test with - FireFox won't even alert the first nodeName and Internet Explorer doesn't know what target is.

    1. You are passing "event" as an argument to a function. This is unnecessary. Internet Explorer recognizes 'event' as a global object so IE doesn't need the 'event argument'. Other browsers automatically pass the event to the function as an argument. All you have to do is include the argument in the function itself BUT NOT in the call. eg

    Make the handler

    onkeypress="return AllowNumbersOnly2(this, true);" 

    and the top of the function like this :

    function AllowNumbersOnly2(oTextbox, bAllowDecimals, evt){
    ...

    then merge the two event objects with the OR operator like this

    var e=evt||event;

    IF evt is 'truthy' (ie it exists and is not equal to false, 0, undefined etc) it will be used for the value of e.
    If evt is 'falsey' the global event will be used for e.

    2. The reason oEvent.target is not working is because Internet Explorer uses srcElement instead of target. It is all the other browsers that use target. Again, you can merge these easily using the OR operator.

    var e=evt||event;
    var eTarget=e.target||e.srcElement;

    Now

    alert(eTarget.nodeName);

    should do what you were trying to do with

    alert(oTextbox2.nodeName);

    and do it in any browser.

    3. You are using the onkeypress event which is a combination of onkeydown and onkeyup. If you are retrieving the value of the input using onkeypress, then the value of the input onkeydown is likely to be returned - ie before it has changed. Try using onkeyup instead if you want the input value after it has changed.

    4. The easiest way to only allow numbers and one decimal point in an input is to check if the input value is a number ie isNaN(inputValue)===false.

    eg

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test Input</title>
    <style type="text/css">
    <!--
    body {width:100%;background:#ccc;color:#000;text-align:left;margin:0;padding:20px;font:bold 16px/18px Arial;}
    input {width:400px;}
    -->
    </style>
    <script type="text/javascript">
    //global
    var inputValue="";
    function testString(){
     var str=document.getElementById("strIn").value;
     str=str.replace(/ /,"");//trim spaces
     inputValue=document.getElementById("strIn").value=(!isNaN(str))?str:inputValue;
    }
    document.onreadystatechange=function(){
     if(document.readyState==="complete"){//when the page has loaded
      document.getElementById("strIn").onkeyup=document.getElementById("strIn").onchange=testString;//use onchange for mouse paste
     }
    };
    </script>
    </head>
    <body>
    <h3>Validate Input</h3>
    <h5>Allow only numbers and one decimal point</h5>
    <p>Enter Data : <input type="text" id="strIn" value=""></input></p>
    </body>
    </html>


    • Edited by mystifeid Wednesday, April 24, 2013 4:51 PM
    • Marked as answer by DallasSteve Wednesday, April 24, 2013 6:04 PM
    Wednesday, April 24, 2013 4:03 PM

All replies

  • Sounds like you are using Internet Explorer to test with - FireFox won't even alert the first nodeName and Internet Explorer doesn't know what target is.

    1. You are passing "event" as an argument to a function. This is unnecessary. Internet Explorer recognizes 'event' as a global object so IE doesn't need the 'event argument'. Other browsers automatically pass the event to the function as an argument. All you have to do is include the argument in the function itself BUT NOT in the call. eg

    Make the handler

    onkeypress="return AllowNumbersOnly2(this, true);" 

    and the top of the function like this :

    function AllowNumbersOnly2(oTextbox, bAllowDecimals, evt){
    ...

    then merge the two event objects with the OR operator like this

    var e=evt||event;

    IF evt is 'truthy' (ie it exists and is not equal to false, 0, undefined etc) it will be used for the value of e.
    If evt is 'falsey' the global event will be used for e.

    2. The reason oEvent.target is not working is because Internet Explorer uses srcElement instead of target. It is all the other browsers that use target. Again, you can merge these easily using the OR operator.

    var e=evt||event;
    var eTarget=e.target||e.srcElement;

    Now

    alert(eTarget.nodeName);

    should do what you were trying to do with

    alert(oTextbox2.nodeName);

    and do it in any browser.

    3. You are using the onkeypress event which is a combination of onkeydown and onkeyup. If you are retrieving the value of the input using onkeypress, then the value of the input onkeydown is likely to be returned - ie before it has changed. Try using onkeyup instead if you want the input value after it has changed.

    4. The easiest way to only allow numbers and one decimal point in an input is to check if the input value is a number ie isNaN(inputValue)===false.

    eg

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test Input</title>
    <style type="text/css">
    <!--
    body {width:100%;background:#ccc;color:#000;text-align:left;margin:0;padding:20px;font:bold 16px/18px Arial;}
    input {width:400px;}
    -->
    </style>
    <script type="text/javascript">
    //global
    var inputValue="";
    function testString(){
     var str=document.getElementById("strIn").value;
     str=str.replace(/ /,"");//trim spaces
     inputValue=document.getElementById("strIn").value=(!isNaN(str))?str:inputValue;
    }
    document.onreadystatechange=function(){
     if(document.readyState==="complete"){//when the page has loaded
      document.getElementById("strIn").onkeyup=document.getElementById("strIn").onchange=testString;//use onchange for mouse paste
     }
    };
    </script>
    </head>
    <body>
    <h3>Validate Input</h3>
    <h5>Allow only numbers and one decimal point</h5>
    <p>Enter Data : <input type="text" id="strIn" value=""></input></p>
    </body>
    </html>


    • Edited by mystifeid Wednesday, April 24, 2013 4:51 PM
    • Marked as answer by DallasSteve Wednesday, April 24, 2013 6:04 PM
    Wednesday, April 24, 2013 4:03 PM
  • mystifeid

    This line of code is what I needed:

    var eTarget=e.target||e.srcElement;

    I didn't know that IE uses srcElement instead of target.  Hopefully, I will remember that in the future.  You are good.

    Thank you so much. 

    Steve


    MCSD .NET developer in Dallas, Texas

    Wednesday, April 24, 2013 6:03 PM