SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    unobtrusive js IE problem

    I am just learning js and was able to do a few things, but I was then recomended by Raffles that I should be using unobtrusive js, so I started working on it but I got stuck on the IE attachEvent, can someone point me in the right direction?

    here is my code

    Code HTML4Strict:
    <html>
    <head>
    </head>
    <body>
    name: <input id="test" name="test" type="text" size="50" maxlength="50"/>
    <script type="text/javascript">
    function format(event)
    {
    	var target = event.target;
        target.style.background = "#FFFF00";
    }
    var myvar=document.getElementById("test");
    if (myvar.addEventListener)
    {
    myvar.addEventListener('change', format, false);
    }
    else if (myvar.attachEvent)
    {
    myvar.attachEvent('onblur', format);
    }
    </script>
    </body>
    </html>

  2. #2
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I.E. has a different name for the triggering element:
    Code:
    function format( evt )
    {
        var target =  evt.target || evt.srcElement;
        
        target.style.background = "#FFFF00";
    }
    Tab-indentation is a crime against humanity.

  3. #3
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Logic Ali View Post
    I.E. has a different name for the triggering element:
    Code:
    function format( evt )
    {
        var target =  evt.target || evt.srcElement;
        
        target.style.background = "#FFFF00";
    }
    Thanks, okay, that fixed the problem, but, what if I wanted to access the value of something, for instance, I was working on a different script where I would access the value of a field by doing target.value and it works just fine in firefox but it does nothing on IE, now, here is my code

    Code HTML4Strict:
    <html>
    <head>
    <style type="text/css">
    .errorcontainer
    	{
    		text-align:left;
    		width:auto;
    		height:auto;
    		position:fixed;
    		top:auto;
    		bottom:auto;
    		right:10px;
    		background:red;
    		color:white;
    	}
    </style>
    </head>
    <body>
    <input type="text" id="tester">
    <p/>
    <input disabled id="button" type="submit" value="submit" >
    <div id="consoleoferrors" class="errorcontainer">
    </div>
    <script type="text/javascript">
    function checkfieldforinvalidchars(event)
    {
    //Variables
    var NOsymbolshere=new RegExp(/[!"$%&()=?'^*_:;,.-`+`+]/);
    var NOnumbershere=new RegExp(/\d/);
    var thefield=event.target || event.srcElement;
    var thevalue=event.target.value || event.srcElement.value;
    //Conditions
    if (NOnumbershere.test(thevalue)==true)
    {
    document.getElementById("consoleoferrors").innerHTML=("We just found an error in your input:<br>No numbers are allowed in this field.<br>In this field you can only use letters from a-z and also accented vowels.<br>Please correct the highlighted field!");
    thefield.style.background="#FFFF00";
    }
    else if (NOsymbolshere.test(thevalue)==true)
    {
    document.getElementById("consoleoferrors").innerHTML=("We just found an error in your input:<br>No symbols are allowed in this field.<br>In this field you can only use letters from a-z and also accented vowels.<br>Please correct the highlighted field!");
    thefield.style.background="#FFFF00";
    }
    else if(thevalue.length<=1)
    {
    document.getElementById("consoleoferrors").innerHTML=("This field is mandatory, please complete it correctly!");
    thefield.style.background="#FFFF00";
    }
    else if(thevalue.length>=15)
    {
    document.getElementById("consoleoferrors").innerHTML=("This field is mandatory and you have enetered too many characters, please fill it up correctly!");
    thefield.style.background="#FFFF00";
    }
    else
    {
    thefield.style.background="#FFFFFF";
    document.getElementById("consoleoferrors").innerHTML=("");
    }
    if (document.getElementById("consoleoferrors").innerHTML=="")
    {
    document.getElementById("button").disabled=false;
    }
    else
    {
    document.getElementById("button").disabled=true;
    }
    }
     
    var apply=document.getElementById("tester");
     
    if (apply.addEventListener)
    {
    apply.addEventListener('change', checkfieldforinvalidchars, false);
    }
    else if (apply.attachEvent)
    {
    apply.attachEvent('onchange', checkfieldforinvalidchars);
    }
     
     
    </script>
    </body>
    </html>

    thanks for your help!!

  4. #4
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    well I think I just figured how to achieve it, problem was that to obtain the value the way I was doing it, it would only work in either one of the browsers

    here it would only work in FF
    Code JavaScript:
    var thevalue=event.target.value || event.srcElement.value;
    and here only in IE
    Code JavaScript:
    var thevalue=event.srcElement.value || event.target.value;
    what I did was, since I had already stored the field with
    Code JavaScript:
    var thefield=event.target || event.srcElement;
    then I just did
    Code JavaScript:
    var thevalue=thefield.value;
    which worked beautifully!!!

    Thanks for your help again!!!

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by tlacaelelrl View Post
    Thanks, okay, that fixed the problem, but, what if I wanted to access the value of something
    Then you use the targ variable to get to the value.

    For example:

    Code javascript:
    function formatClickHandler(evt) {
        evt = evt || window.event;
        var targ = evt.target || evt.srcElement;
        var value = "#FFFF00";
    }

    Now you have the event, the target element, and the value, which you can use to achieve your needs.

    The evt and targ part above are a common pattern that's used. For example, when handling clicks:

    Code javascript:
    function clickHandler(evt) {
        evt = evt || window.event;
        var targ = evt.target || evt.srcElement;
        if (targ.nodeType === 3) { // opera bug
            targ = targ.parentNode;
        }
        if (targ.nodeType === 1 && targ.nodeName === 'A') {
            // handle link here
        }
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Then you use the targ variable to get to the value.

    For example:

    Code javascript:
    function formatClickHandler(evt) {
        evt = evt || window.event;
        var targ = evt.target || evt.srcElement;
        var value = "#FFFF00";
    }
    For IE the OP's code used window.attachEvent, so the event object is passed to the handler and window.event is undefined.
    Tab-indentation is a crime against humanity.

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Logic Ali View Post
    For IE the OP's code used window.attachEvent, so the event object is passed to the handler and window.event is undefined.
    Yes, that is normal, and helps to explain this standard line which retrieves the event from window.event, if the evt variable is undefined.

    Code javascript:
    evt = evt || window.event;

    That line is equivalent to:

    Code javascript:
    if (!evt) {
        evt = window.event;
    }
    Last edited by paul_wilkins; Apr 13, 2011 at 18:29.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Yes, that is normal, and helps to explain this standard line which retrieves the event from window.event, if the evt variable is undefined.

    Code javascript:
    evt = evt || window.event;

    That line is equivalent to:

    Code javascript:
    if (!evt) {
        evt = window.event;
    }
    I think you have misunderstood my point. An event handler installed by IE using attachEvent, receives the event object as a parameter. Reading window.event doesn't work, at least not under the circumstances of the code in this thread.
    Tab-indentation is a crime against humanity.

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Logic Ali View Post
    An event handler installed by IE using attachEvent, receives the event object as a parameter. Reading window.event doesn't work, at least not under the circumstances of the code in this thread.
    Earlier version of IE definitely do not pass the event to the function, so it would be good to see some documentation concerning when IE improved on that.

    Regardless of that, reading window.event is only performed when evt is a falsy value, so there is no problem there.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •