unobtrusive js IE problem

**tlacaelelrl** · Apr 12, 2011 16:45

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>

**Logic Ali** · Apr 12, 2011 17:50

I.E. has a different name for the triggering element:

Code:

function format( evt )
{
    var target =  evt.target || evt.srcElement;
    
    target.style.background = "#FFFF00";
}

**tlacaelelrl** · Apr 12, 2011 18:14

Originally Posted by Logic Ali

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!!

**tlacaelelrl** · Apr 12, 2011 18:44

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!!!

**paul_wilkins** · Apr 12, 2011 19:15

Originally Posted by tlacaelelrl

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
    }
}

**Logic Ali** · Apr 12, 2011 19:56

Originally Posted by paul_wilkins

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.

**paul_wilkins** · Apr 12, 2011 20:00

Originally Posted by Logic Ali

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;
}

**Logic Ali** · Apr 13, 2011 18:21

Originally Posted by paul_wilkins

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.

**paul_wilkins** · Apr 13, 2011 18:28

Originally Posted by Logic Ali

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.

User Tag List

Thread: unobtrusive js IE problem

Thread Tools

Display

unobtrusive js IE problem

Bookmarks

Bookmarks

Posting Permissions