target.value in IE (MS internetexplorer)

J

joe

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?
 
E

Elegie

On 04/07/2011 15:40, joe wrote :

Hi Joe,

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

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])">
Click to expand...

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.
 
M

Martin Honnen

joe said:
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?
Click to expand...

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) { ... }
 
J

joe

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).
 
R

Richard Cornford

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">
Click to expand...
^^^^^^^^^^^^^^^^^^^^^
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)
Click to expand...

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])">
Click to expand...

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;
Click to expand...

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])">
Click to expand...
<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?
Click to expand...

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.
 
E

Elegie

On 04/07/2011 16:26, Richard Cornford write :

Hello Richard,

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.
Click to expand...

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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Need Help, Both submit button works same, i need both submit button works differently, the one button override other button 3
I am trying to detect Which image id="" was clicked ? 22
Set value after clicking in field 11
Need help , Having problem with Drag n Drop... 1
Help with code 0
Need help , Having problem with Drag n Drop ? 9
Please Help? 0

Members online

Total: 24 (members: 1, guests: 23)
Robots: 510

Forum statistics

Threads
473,769
Messages
2,569,579
Members
45,053
Latest member
BrodieSola

Latest Threads

Top