Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > target.value in IE (MS internetexplorer)

Reply
Thread Tools

target.value in IE (MS internetexplorer)

 
 
joe
Guest
Posts: n/a
 
      07-04-2011
I'm trying to get a target value from an option -control.

Sample code that works in FireFox but on IE 9 or IE 6 (I haven't tested others):

<HTML><HEAD></head><body>
<SCRIPT TYPE="text/javascript" LANGUAGE="Javascript">
function mytest(eventTarget, eventObject)
{
var str1,test;
str1=eventObject.target.value;
test=document.getElementById("ab");
test.innerHTML=str1;
}
</SCRIPT>

<select onclick="mytest(this,arguments[0])">
<option value="bla" >One</option>
<option value="blu" >Two</option>
<option value="yel" >Three</option>
</select>

<div id="ab" style="position:absolute; left: 100px;top:100px;width: 200px;height:
100px;">
Testing</div>

</BODY></HTML>



After Googling around I found some info that I could use like this:

<HTML><HEAD></head><body>
<SCRIPT TYPE="text/javascript" LANGUAGE="Javascript">
function mytest(event)
{
var str1,test;
var target= event.target || event.srcElement;
str1=target.options[target.selectedIndex].value;
test=document.getElementById("ab");
test.innerHTML=str1;
};
</SCRIPT>

<select onclick="mytest(arguments[0])">
<option value="bla" >One</option>
<option value="blu" >Two</option>
<option value="yel" >Three</option>
</select>

<div id="ab" style="position:absolute; left: 100px;top:100px;width: 200px;height:
100px;">
Testing</div>

</BODY></HTML>


Unfortunately it works only on FF but not IE.
What can I try next?
 
Reply With Quote
 
 
 
 
Elegie
Guest
Posts: n/a
 
      07-04-2011
On 04/07/2011 15:40, joe wrote :

Hi Joe,


> function mytest(eventTarget, eventObject)
> {
> var str1,test;
> str1=eventObject.target.value;


Since you already pass the eventTarget as argument, why not use it directly?

str1=eventTarget.value;

> After Googling around I found some info that I could use like this:
>
> <HTML><HEAD></head><body>
> <SCRIPT TYPE="text/javascript" LANGUAGE="Javascript">
> function mytest(event)
> {
> var str1,test;
> var target= event.target || event.srcElement;
> str1=target.options[target.selectedIndex].value;
> test=document.getElementById("ab");
> test.innerHTML=str1;
> };
> </SCRIPT>
>
> <select onclick="mytest(arguments[0])">


In IE, the event is not passed as argument, but is declared on a global
variable named "event". So you can do something like

<select onclick="mytest(arguments[0] || window.event)">

.... and it should work. I am sorry I forgot to mention it when you asked
in a prior post. I thought it would not matter, because you do not
really need the event object since you already pass the target as
argument (see example 1).

Regards,
Elegie.
 
Reply With Quote
 
 
 
 
Martin Honnen
Guest
Posts: n/a
 
      07-04-2011
joe wrote:
> I'm trying to get a target value from an option -control.
>
> Sample code that works in FireFox but on IE 9 or IE 6 (I haven't tested others):
>
> <HTML><HEAD></head><body>
> <SCRIPT TYPE="text/javascript" LANGUAGE="Javascript">
> function mytest(eventTarget, eventObject)
> {
> var str1,test;
> str1=eventObject.target.value;
> test=document.getElementById("ab");
> test.innerHTML=str1;
> }
> </SCRIPT>
>
> <select onclick="mytest(this,arguments[0])">
> <option value="bla">One</option>
> <option value="blu">Two</option>
> <option value="yel">Three</option>
> </select>
>
> <div id="ab" style="position:absolute; left: 100px;top:100px;width: 200px;height:
> 100px;">
> Testing</div>
>
> </BODY></HTML>
>
>
>
> After Googling around I found some info that I could use like this:
>
> <HTML><HEAD></head><body>
> <SCRIPT TYPE="text/javascript" LANGUAGE="Javascript">
> function mytest(event)
> {
> var str1,test;
> var target= event.target || event.srcElement;
> str1=target.options[target.selectedIndex].value;
> test=document.getElementById("ab");
> test.innerHTML=str1;
> };
> </SCRIPT>
>
> <select onclick="mytest(arguments[0])">
> <option value="bla">One</option>
> <option value="blu">Two</option>
> <option value="yel">Three</option>
> </select>
>
> <div id="ab" style="position:absolute; left: 100px;top:100px;width: 200px;height:
> 100px;">
> Testing</div>
>
> </BODY></HTML>
>
>
> Unfortunately it works only on FF but not IE.
> What can I try next?


What do you want to achieve?
With a select control the onchange event handler is much better
supported than onclick, and to find the currently selected option you can do

<select onchange="myTest(this);" ...>...</select>

function myTest(select) {
var value = select.options[select.selectedIndex].value;
...
}
though these days doing
var value = select.value;
should be supported as well.

If you really want to pass on the event object then do
<select onchange="myTest(this, event);">...</select>

function myTest(select, evt) { ... }


--

Martin Honnen --- MVP Data Platform Development
http://msmvps.com/blogs/martin_honnen/
 
Reply With Quote
 
joe
Guest
Posts: n/a
 
      07-04-2011
Thank you.

My primary browser is FF and it has a nice debugger (Firebug) where I can test a
lot of stuff. IE does not seem to have a good debugger (a free/shareware).

 
Reply With Quote
 
Richard Cornford
Guest
Posts: n/a
 
      07-04-2011
On Jul 4, 2:40 pm, joe wrote:
> I'm trying to get a target value from an option -control.
>
> Sample code that works in FireFox but on IE 9 or IE 6 (I haven't
> tested others):
>
> <HTML><HEAD></head><body>
> <SCRIPT TYPE="text/javascript" LANGUAGE="Javascript">

^^^^^^^^^^^^^^^^^^^^^
Don't bother with a LANGUAGE attribute as it is redundant if you
already have a TYPE attribute and is very easy to spell incorrectly or
miss-type.

> function mytest(eventTarget, eventObject)


Looking at the way that this function is called it appears that the -
eventTarget - argument will be the SELECT element that you are
interested in, and so messing around with the - target - property of
the event object to get a reference to that same SELECT element is
doing things the hard way.

> {
> var str1,test;
> str1=eventObject.target.value;
> test=document.getElementById("ab");
> test.innerHTML=str1; }
>
> </SCRIPT>
>
> <select onclick="mytest(this,arguments[0])">


This is interesting as it is the first time I have seen - arguments[0]
- used in this context. Traditionally (and for good practical reasons)
the Identifier - event - has been used in this context, and if that
had been used in the code you learnt this from you would not have been
having some of these problems. Then again, you would also have missed
the opportunity to learn what is going on here and why things aren't
working here.

The text value that appears for the ONCLICK attribute is handled by
the browser by turning that text into the body code for a (javascript)
function that it creates internally and then assigns to the - onclick
- property of the DOM representation of the element from the mark-up
that had the ONCLICK attribute. FireFox and IE do this slightly
differently (with everyone else doing it (more or less) the FireFox
(originally Netscape) way), at least in terms of the function they
create. (details and manifestations of what is referred to as
"augmenting the scope chain) will not be covered here.)

Given the attribute - onclick="mytest(this,arguments[0]) - IE does the
equivalent of:-

selectElement.onclick = function(){
mytest(this, arguments[0]);
};

- While FireFox will do the equivalent of:-

selectElement.onclick = function(event){
mytest(this, arguments[0]);
};

Notice that IE's version does not have a formal parameter for the
function it calls with Identifier - event -, while FireFox's does.

When the browser calls this function (in response to an onclick event)
all browsers call the function as a method of the SELECT element's DOM
representation, and so within the function body the - this - keyword
will refer to that element. However, FireFox calls the function with
an event object as an argument to the method call (corresponding with
the function's - event - formal parameter), but IE does not provide
any argument to the method call. Instead, in IE, the event object for
each event is made available as the equivalent of a global variable
with the name - event -.

So, in the FireFox case, inside the function's body - arguments[0] -
or - event - can be used to refer to the event object passed as an
argument to the method call, but in IE there is no argument so -
arguments[0] - will have the undefined value, but the Identifier -
event - will refer to the global event object that IE provides in
place of a function argument.

> <option value="bla" >One</option>
> <option value="blu" >Two</option>
> <option value="yel" >Three</option>
> </select>
>
> <div id="ab" style="position:absolute; left: 100px;top:100px;width: 200px;height:
> 100px;">
> Testing</div>
>
> </BODY></HTML>
>
> After Googling around I found some info that I could use like this:
>
> <HTML><HEAD></head><body>
> <SCRIPT TYPE="text/javascript" LANGUAGE="Javascript">
> function mytest(event)
> {
> var str1,test;
> var target= event.target || event.srcElement;


In terms of normalising the event object's 'target' this is the
standard (and so effectively 'correct') code, but when this - mytest -
function is called it is being passed an event object in FireFox, but
the undefined values in IE.

> str1=target.options[target.selectedIndex].value;
> test=document.getElementById("ab");
> test.innerHTML=str1; };
>
> </SCRIPT>
>
> <select onclick="mytest(arguments[0])">

<snip>

So, as explained above, in IE - arguments[0] - has the undefined value
because no arguments are passed to the function when it is called. If
the Identifier - event - replaced - arguments[0] - then you would have
code that worked in both (and indeed all other scriptable) browsers.
It would be resolved as the - event - parameter of the internally
created function in FireFox (and so the equivalent of - arguments[0] -
there), and as a reference to the global - event - variable in IE.

However, again, in that context the - this - keyword would refer to
the SELECT element, and so the select element could be passed as an
argument to the - mytest - function directly, and so the need to mess
around with the event object avoided entirely.

> Unfortunately it works only on FF but not IE.
> What can I try next?


One thing for the future; note wherever you observed the -
arguments[0] - code, and start treating that as a questionable source
for browser scripting advice.

Richard.
 
Reply With Quote
 
Elegie
Guest
Posts: n/a
 
      07-04-2011
On 04/07/2011 16:26, Richard Cornford write :

Hello Richard,

<snip excellent explanation>

> One thing for the future; note wherever you observed the -
> arguments[0] - code, and start treating that as a questionable source
> for browser scripting advice.


Actually, it as from me. The OP asked a question a few days ago in the
group, so I provided a quick answer, showing how the event would be
passed as argument to the listener, but not explaining that it would
behave differently for IE. The reason for this is that I was trying to
balance how much information would be appropriate for the post, in
regards of what I perceived of the OP's interest/knowledge, but somehow
this ended being quite a sloppy post of mine, which is why I apologized
to Joe here.

About "arguments[0]": the real construct that I used in the past was
"arguments[0] || window.event", and I used it for the following reasons:

[1] I could not make sure, reading the specifications that I could find,
that the argument name of the event object would be guaranteed to be
"event", in all browsers deciding to go for this pattern. So I asked
myself: why rely on names, when you can get an object reference?

[2] I did not like the fact that the "event" identifier could implicitly
refer to either an undeclared function argument or to the "window.event"
variable, depending on the browser in use. This looked like
programming-by-coincidence to me, and this lack of clarity was enough to
rule the construct out of my scripting practices.

Nowadays, I do not script much, but if I did, I believe this would not
really matter, as I would preferably declare the listeners outside of
HTML tags.

Regards,
Elegie.
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off




Advertisments