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

[Michel]

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

 

[David Mark]

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]

 

[Michel]

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

 

[Andrew Poulos]

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

 

[David Mark]

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.

 

[Thomas 'PointedEars' Lahn]

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]

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]

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