target.value in IE (MS internetexplorer)

Discussion in 'Javascript' started by joe, Jul 4, 2011.

  1. joe

    joe Guest

    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?
    joe, Jul 4, 2011
    #1
    1. Advertising

  2. joe

    Elegie Guest

    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.
    Elegie, Jul 4, 2011
    #2
    1. Advertising

  3. 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/
    Martin Honnen, Jul 4, 2011
    #3
  4. joe

    joe Guest

    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).
    joe, Jul 4, 2011
    #4
  5. 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.
    Richard Cornford, Jul 4, 2011
    #5
  6. joe

    Elegie Guest

    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.
    Elegie, Jul 4, 2011
    #6
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Ryan Clark

    shdocvw.internetexplorer object help

    Ryan Clark, Jan 6, 2004, in forum: ASP .Net
    Replies:
    3
    Views:
    6,504
    quantum
    Feb 2, 2004
  2. quantum

    Using SHDocVW-InternetExplorer

    quantum, Feb 2, 2004, in forum: ASP .Net
    Replies:
    0
    Views:
    2,363
    quantum
    Feb 2, 2004
  3. Afigels
    Replies:
    0
    Views:
    549
    Afigels
    Nov 16, 2004
  4. Lars-Erik Aabech
    Replies:
    4
    Views:
    2,701
    Steven Cheng[MSFT]
    Nov 3, 2005
  5. Richard Bell
    Replies:
    19
    Views:
    5,438
    Carlos Oliva
    Feb 20, 2004
Loading...

Share This Page