onkeyup: issue with IE - OK with FF/Chrome/Safari

Discussion in 'Javascript' started by Michel, May 24, 2009.

  1. Michel

    Michel Guest

    Hello,

    I want to use a JS function to display the total of 3 textboxes in a
    fourth one.
    The page is built in VB.Net

    The JS function is as follows:

    function DoTotal_3A() {

    var a = eval(document.getElementById("TB_1").value)
    var b = eval(document.getElementById("TB_2").value)
    var c = eval(document.getElementById("TB_3").value)

    document.getElementById("TB_Result").value = a + b + c;

    }

    The call of the function is added to the textboxes in the page.load
    event as follows:
    TB_1.Attributes.Add("onkeyup", "DoTotal_3A();")
    TB_2.Attributes.Add("onkeyup", "DoTotal_3A();")
    TB_3.Attributes.Add("onkeyup", "DoTotal_3A();")

    The function works correctly in FireFox/Chrome/Safari but displays an
    error in IE. For information, I checked that the ID's used in the
    function are indeed those used by the HTML output of the VB code.

    I will appreciate your support,

    Michel
     
    Michel, May 24, 2009
    #1
    1. Advertising

  2. Michel

    David Mark Guest

    On May 24, 12:11 pm, Michel <> wrote:
    > Hello,
    >
    > I want to use a JS function to display the total of 3 textboxes in a
    > fourth one.
    > The page is built in VB.Net


    Look out below!

    >
    > The JS function is as follows:
    >
    > function DoTotal_3A() {
    >
    >             var a = eval(document.getElementById("TB_1").value)
    >             var b = eval(document.getElementById("TB_2").value)
    >             var c = eval(document.getElementById("TB_3").value)


    Why eval?

    >
    >             document.getElementById("TB_Result").value = a + b + c;
    >
    > }
    >
    > The call of the function is added to the textboxes in the page.load
    > event as follows:
    > TB_1.Attributes.Add("onkeyup", "DoTotal_3A();")
    > TB_2.Attributes.Add("onkeyup", "DoTotal_3A();")
    > TB_3.Attributes.Add("onkeyup", "DoTotal_3A();")


    Huh?

    >
    > The function works correctly in FireFox/Chrome/Safari but displays an
    > error in IE.


    You are wasting time. What error?

    [snip]
     
    David Mark, May 24, 2009
    #2
    1. Advertising

  3. Michel

    Michel Guest

    On May 24, 6:41 pm, David Mark <> wrote:
    > On May 24, 12:11 pm, Michel <> wrote:
    >
    > > Hello,

    >
    > > I want to use a JS function to display the total of 3 textboxes in a
    > > fourth one.
    > > The page is built in VB.Net

    >
    > Look out below!
    >
    >
    >
    > > The JS function is as follows:

    >
    > > function DoTotal_3A() {

    >
    > >             var a = eval(document.getElementById("TB_1").value)
    > >             var b = eval(document.getElementById("TB_2").value)
    > >             var c = eval(document.getElementById("TB_3").value)

    >
    > Why eval?
    >
    >
    >
    > >             document.getElementById("TB_Result").value = a + b + c;

    >
    > > }

    >
    > > The call of the function is added to the textboxes in the page.load
    > > event as follows:
    > > TB_1.Attributes.Add("onkeyup", "DoTotal_3A();")
    > > TB_2.Attributes.Add("onkeyup", "DoTotal_3A();")
    > > TB_3.Attributes.Add("onkeyup", "DoTotal_3A();")

    >
    > Huh?
    >
    >
    >
    > > The function works correctly in FireFox/Chrome/Safari but displays an
    > > error in IE.

    >
    > You are wasting time.  What error?
    >
    > [snip]


    I am maybe "wasting time" because I provided no details on the error
    raised by IE but I will tell you that you wasted your time answering
    with "Huh?" and "[snip]". Totally helpless feedback.
    You have certainly not helped me
     
    Michel, May 25, 2009
    #3
  4. Michel wrote:
    > On May 24, 6:41 pm, David Mark <> wrote:
    >> On May 24, 12:11 pm, Michel <> wrote:
    >>
    >>> Hello,
    >>> I want to use a JS function to display the total of 3 textboxes in a
    >>> fourth one.
    >>> The page is built in VB.Net

    >> Look out below!
    >>
    >>
    >>
    >>> The JS function is as follows:
    >>> function DoTotal_3A() {
    >>> var a = eval(document.getElementById("TB_1").value)
    >>> var b = eval(document.getElementById("TB_2").value)
    >>> var c = eval(document.getElementById("TB_3").value)

    >> Why eval?
    >>
    >>
    >>
    >>> document.getElementById("TB_Result").value = a + b + c;
    >>> }
    >>> The call of the function is added to the textboxes in the page.load
    >>> event as follows:
    >>> TB_1.Attributes.Add("onkeyup", "DoTotal_3A();")
    >>> TB_2.Attributes.Add("onkeyup", "DoTotal_3A();")
    >>> TB_3.Attributes.Add("onkeyup", "DoTotal_3A();")

    >> Huh?
    >>
    >>
    >>
    >>> The function works correctly in FireFox/Chrome/Safari but displays an
    >>> error in IE.

    >> You are wasting time. What error?
    >>
    >> [snip]

    >
    > I am maybe "wasting time" because I provided no details on the error
    > raised by IE but I will tell you that you wasted your time answering
    > with "Huh?" and "[snip]". Totally helpless feedback.
    > You have certainly not helped me


    No one can help without you properly describing the problem you're
    having. You are expecting the reader to guess what the error is that
    you're seeing - you don't even state what version(s) of IE.

    DM asked for more detail but you refuse to provide it. Good luck at
    solving your problem.

    Andrew Poulos
     
    Andrew Poulos, May 25, 2009
    #4
  5. Michel

    David Mark Guest

    On May 25, 3:45 am, Andrew Poulos <> wrote:
    > Michel wrote:
    > > On May 24, 6:41 pm, David Mark <> wrote:
    > >> On May 24, 12:11 pm, Michel <> wrote:

    >
    > >>> Hello,
    > >>> I want to use a JS function to display the total of 3 textboxes in a
    > >>> fourth one.
    > >>> The page is built in VB.Net
    > >> Look out below!

    >
    > >>> The JS function is as follows:
    > >>> function DoTotal_3A() {
    > >>>             var a = eval(document.getElementById("TB_1").value)
    > >>>             var b = eval(document.getElementById("TB_2").value)
    > >>>             var c = eval(document.getElementById("TB_3").value)
    > >> Why eval?

    >
    > >>>             document.getElementById("TB_Result").value = a + b + c;
    > >>> }
    > >>> The call of the function is added to the textboxes in the page.load
    > >>> event as follows:
    > >>> TB_1.Attributes.Add("onkeyup", "DoTotal_3A();")
    > >>> TB_2.Attributes.Add("onkeyup", "DoTotal_3A();")
    > >>> TB_3.Attributes.Add("onkeyup", "DoTotal_3A();")
    > >> Huh?

    >
    > >>> The function works correctly in FireFox/Chrome/Safari but displays an
    > >>> error in IE.
    > >> You are wasting time.  What error?

    >
    > >> [snip]

    >
    > > I am maybe "wasting time" because I provided no details on the error
    > > raised by IE but I will tell you that you wasted your time answering
    > > with "Huh?" and "[snip]". Totally helpless feedback.
    > > You have certainly not helped me

    >
    > No one can help without you properly describing the problem you're
    > having. You are expecting the reader to guess what the error is that
    > you're seeing - you don't even state what version(s) of IE.
    >
    > DM asked for more detail but you refuse to provide it. Good luck at
    > solving your problem.
    >


    The .NET people are nuts. Some things never change.
     
    David Mark, May 25, 2009
    #5
  6. Michel wrote:
    > I want to use a JS function to display the total of 3 textboxes in a
    > fourth one.
    > The page is built in VB.Net


    Which is quite off-topic here.

    > The JS function is as follows:
    >
    > function DoTotal_3A() {


    You might want to lowercase the first letter as the function is not used as
    a constructor.

    > var a = eval(document.getElementById("TB_1").value)
    > var b = eval(document.getElementById("TB_2").value)
    > var c = eval(document.getElementById("TB_3").value)


    You are needlessly opening the door for code injection here. While that may
    not be harmful in itself in a client-side script (as it usually runs in the
    sandbox), it is certainly unwise to allow it. Suppose someone types `a' by
    accident ...

    ,-<http://jibbering.com/faq/#eval>
    |
    | 6.1 When should I use eval?

    > document.getElementById("TB_Result").value = a + b + c;


    document.getElementById("TB_Result").value = (+a) + (+b) + (+c);

    is equivalent to the above, save the possibility of code injection.
    (The parentheses are optional, but help to see what is going on).

    >
    > }
    >
    > The call of the function is added to the textboxes in the page.load
    > event as follows:
    > TB_1.Attributes.Add("onkeyup", "DoTotal_3A();")
    > TB_2.Attributes.Add("onkeyup", "DoTotal_3A();")
    > TB_3.Attributes.Add("onkeyup", "DoTotal_3A();")
    >
    > The function works correctly in FireFox/Chrome/Safari


    Do they? But what do they do anway? AFAIK `Attributes' is not a built-in
    DOM property in any DOM. ISTM you are using a library which authors have
    not yet gotten to the point in the ECMAScript learning curve where one knows
    that augmenting host objects or relying on host object's prototypes is a bad
    idea. Don't do that.

    > but displays an error in IE.


    Possibility A: The prototype object of HTMLElement or HTMLInputElement has
    been augmented like this:

    HTMLElement.prototype.Attributes = {
    Add: function(attr, value) {
    ...setAttribute(attr, value);
    }
    };

    (Aside: Would it be possible to get to the element object reference in
    Add()? If yes, how?)

    However, MSHTML would not support this kind of augmentation, nor does it
    support Node::setAttribute() very well.

    Possibility B: The host objects themselves have been augmented, but MSHTML
    does not support it. Maybe there is a name collision with a built-in
    `attributes' property; AFAIK the identifiers some host properties are
    case-insensitive in the MSHTML DOM.

    In any case, don't augment host objects and don't rely on their prototypes
    being available (make use of that feature only if it has been detected).
    Use native wrapper methods or wrapper objects instead. And if you want to
    keep your current calls (which are inflexible, though), avoid setAttribute()
    by using code along these lines:

    Add: function(attr, value) {
    ...[attr] = /^on/i.test(attr)
    ? new Function(value)
    : value;
    }

    > For information, I checked that the ID's used in the function are indeed
    > those used by the HTML output of the VB code.


    However, you should not be using `TB_1' aso. as they are. Use
    document.forms[...].elements["TB_1"] or a getElementById() wrapper instead.

    > I will appreciate your support,


    ,-<http://jibbering.com/faq/#posting>
    |
    | 1.3 What should I do before posting to comp.lang.javascript?

    In particular:

    <http://jibbering.com/faq/faq_notes/clj_posts.html#ps1Quest>


    PointedEars
     
    Thomas 'PointedEars' Lahn, May 25, 2009
    #6
  7. kangax wrote:
    > Thomas 'PointedEars' Lahn wrote:
    > [...]
    >> In any case, don't augment host objects and don't rely on their prototypes
    >> being available (make use of that feature only if it has been detected).
    >> Use native wrapper methods or wrapper objects instead. And if you want to
    >> keep your current calls (which are inflexible, though), avoid setAttribute()
    >> by using code along these lines:
    >>
    >> Add: function(attr, value) {


    JFTR: The property name originates from the OP's code. I would certainly
    not recommend to use an uppercase letter here.

    >> ...[attr] = /^on/i.test(attr)
    >> ? new Function(value)
    >> : value;
    >> }

    >
    > That `new Function` is a somewhat naive approximation, if I understand
    > its purpose correctly.


    You don't.

    > As you know, simulating behavior of intrinsic event handler (`event` as
    > a first argument, `this` referencing element and a scope chain
    > augmentation with at least element itself and document objects), one
    > would need something along the lines of:
    >
    > function eventHandlerFromAttr(element, attrValue){
    > return function(e){
    > with(document){
    > with(element){
    > var fn = eval('(function(event){' + attrValue + '})');
    > return fn.call(element, e);
    > }
    > }
    > }
    > }


    For all intents and purposes, that is mostly unnecessary, inefficient
    nonsense. An event listener will always be called as method of the creating
    DOM object regardless how it is assigned, so fn.call() is superfluous. And
    as for `with' and eval(),

    add: function(attr, value) {
    ...[attr] = /^on/i.test(attr)
    ? new Function("event", value)
    : value;
    }

    would suffice as one would _never_ rely on that *unknown* scope chain here.

    However, you have overlooked a considerably more important issue: MSHTML
    does not pass the event object as first argument for event listeners added
    with scripting.

    Therefore (quick hack):

    add: function(attr, value) {
    ...[attr] = /^on/i.test(attr)
    ? new Function(
    "event",
    "if (!event) event = window.event;" + value)
    : value;
    }


    PointedEars
     
    Thomas 'PointedEars' Lahn, Jun 3, 2009
    #7
  8. kangax wrote:
    > Thomas 'PointedEars' Lahn wrote:
    >> kangax wrote:
    >>> Thomas 'PointedEars' Lahn wrote:
    >>>> [...] And if you want to keep your current calls (which are inflexible,

    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    >>>> though), avoid setAttribute() by using code along these lines:
    >>>>
    >>>> Add: function(attr, value) {

    >> JFTR: The property name originates from the OP's code. I would certainly
    >> not recommend to use an uppercase letter here.
    >>
    >>>> ...[attr] = /^on/i.test(attr)
    >>>> ? new Function(value)
    >>>> : value;
    >>>> }
    >>> That `new Function` is a somewhat naive approximation, if I understand
    >>> its purpose correctly.

    >> You don't.
    >>
    >>> As you know, simulating behavior of intrinsic event handler (`event` as
    >>> a first argument, `this` referencing element and a scope chain
    >>> augmentation with at least element itself and document objects), one
    >>> would need something along the lines of:
    >>>
    >>> function eventHandlerFromAttr(element, attrValue){
    >>> return function(e){
    >>> with(document){
    >>> with(element){
    >>> var fn = eval('(function(event){' + attrValue + '})');
    >>> return fn.call(element, e);
    >>> }
    >>> }
    >>> }
    >>> }

    >> For all intents and purposes, that is mostly unnecessary, inefficient

    >
    > Whether it is efficient is irrelevant.


    It's not. A good implementation is efficient, a bad one isn't.

    > As I said, it is merely a closer approximation of what happens in, for
    > example, Gecko clients.


    So that may work in the observed versions (which are?). A theoretical and
    incomplete example of little practical value. (However, the approach taken
    by the OP is a bad one in the first place, as I have pointed out, so the
    whole thing is rather academical.)

    > [...]
    >> as for `with' and eval(),
    >>
    >> add: function(attr, value) {
    >> ...[attr] = /^on/i.test(attr)
    >> ? new Function("event", value)
    >> : value;
    >> }
    >>
    >> would suffice as one would _never_ rely on that *unknown* scope chain here.

    >
    > Of course not. But, again, that's irrelevant.


    It's not.

    > I am talking about parsing arbitrary attribute value; value that could
    > contain code relying on scope augmentation. Obviously, no one in their
    > right state of mind would rely on augmented scope, and no one should
    > use scope-augmenting simulation when working in a controlled environment.


    A good implementation considers reasonable cases, not all possible ones.
    man jQuery (which is the exact opposite)


    PointedEars
     
    Thomas 'PointedEars' Lahn, Jun 4, 2009
    #8
    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. Paul Hale
    Replies:
    0
    Views:
    297
    Paul Hale
    Sep 4, 2008
  2. Arihan Sinha
    Replies:
    4
    Views:
    236
    Heesob Park
    Sep 28, 2010
  3. Gregor Kofler
    Replies:
    2
    Views:
    186
    Gregor Kofler
    Nov 6, 2008
  4. NickPick
    Replies:
    2
    Views:
    148
    NickPick
    Apr 11, 2009
  5. Kevin N
    Replies:
    1
    Views:
    176
    Jorge
    Jul 24, 2009
Loading...

Share This Page