Why does this not work in IE

R

rick

I am new to javascript and would appreciate any help that is offered.
The following script does not work in IE (the value
(document.quote.qty1.value)is not
displayed in the "equiptotal" field).
Can anyone tell where I went wrong? The script works fine in
Mozilla/Firefox.

//The script
function recalc() {

document.quote.equiptotal.value = document.quote.qty1.value;

}

// The Page

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">

<meta name="generator" content="DreamWeaver">

<link rel="stylesheet" type="text/css" href="/css/web-soft.css">

<title>Quotation</title>

<SCRIPT LANGUAGE="JavaScript" src="/javascript/quote.js">

</script>

</head>

<BODY><center>

<form action="" method="post" name="quote">

<div id="quote">

<div id="smallbar">WEB Soft Systems Inc.</div>

Quotation

<table class="quote" cellspacing="2" cellpadding="2">

<tr>

<th>Qty</th>

<th>Item Num</th>

<th>Supplier</th>

<th>Description</th>

<th>Cost</th>

<th>Hrs</th>

</tr>

<tr>

<td class="small"><input type="text" name="qty1" size="4"
onChange="recalc()" maxlength="4"></td>

<td class="medium"><input name="itemnum1" type="text" id="itemnum1"
size="15"></td>

<td class="medium"><input name="supplier1" type="text" id="supplier1"
size="20"></td>

<td class="large"><input name="description1" type="text" id="description1"
size="30"></td>

<td class="medium"><input type="text" name="unitcost1" size="7"></td>

<td class="small"><input type="text" name="labor1" size="4"
maxlength="4"></td>

</tr>

</table>

<br>

<table class="quote" cellspacing="2" cellpadding="0">

<tr>

<th>Company</th>

<th>Site</th>

<th>Contact</th>

<th></th>

</tr>

<tr>

<td class="medlarge">&nbsp;</td>

<td class="medlarge">&nbsp;</td>

<td class="medlarge">&nbsp;</td>

<td><input type="submit" name="select" value="Select"></td>

</tr>

</table>

<br>

<table class="quote" cellspacing="2" cellpadding="0">

<tr>

<td class="medium" align="right">Equip Cost</td>

<td class="medium" align="left"><input type="text" name="equipcost" readonly
size="10"></td>

<td class="medium" align="right">Equip Total</td>

<td class="medium" align="left"><input type="text" name="equiptotal"
readonly size="10"></td>

<td class="medium" align="right">Sub Total</td>

<td class="medium" align="left"><input type="text" name="subtotal" readonly
size="10"></td>

<td class="small" align="left"></td>

</tr>

<tr>

<td class="medium" align="right">Labour Hrs</td>

<td class="medium" align="left"><input type="text" name="totallabor"
size="10" readonly></td>

<td class="medium" align="right">Mark-Up</td>

<td class="medium" align="left"><input type="text" name="markup"
onChange="recalc()" size="3" maxlength="4">%</td>

<td class="medium" align="right">PST 8%</td>

<td class="medium" align="left"><input type="text" name="pst" size="10"
readonly></td>

<td class="small" align="left"><input type="checkbox" name="check1"
value="Value1"></td>

</tr>

<tr>

<td class="medium" align="right">Labour Rate</td>

<td class="medium" align="left"><input type="text" name="laborrate"
size="10" readonly></td>

<td class="medium" align="right">Gross Margin</td>

<td class="medium" align="left"><input type="text" name="grossmargin"
size="10"></td>

<td class="medium" align="right">GST 7%</td>

<td class="medium" align="left"><input type="text" name="gst" size="10"
readonly></td>

<td class="small" align="left"><input type="checkbox" name="check2"
value="Value2"></td>

</tr>

<tr>

<td class="medium" align="right">Total Labour</td>

<td class="medium" align="left"><input type="text" name="laborcost"
size="10" readonly></td>

<td class="medium" align="right">Gross Profit&nbsp;</td>

<td class="medium" align="left"><input type="text" name="grossprofit"
size="10"></td>

<td class="medium" align="right">Total</td>

<td class="medium" align="left"><input type="text" name="total" size="10"
maxlength="10" readonly></td>

<td class="small" align="left"><input type="checkbox" name="check3"
value="Value3"></td>

</tr>

</table><br>

</div>

<div id="footer">Copyright&copy;2004 R.M. Singh</div>

</form>

</body>

</center>

</html>
 
Y

Yann-Erwan Perio

rick said:
The following script does not work in IE
Click to expand...
function recalc() {
Click to expand...

In IE, there's already a method named "recalc", it's a member of the
document object. Your problem has to do with the function's name
resolution (some kind of name conflict, you could say).

<URL:http://msdn.microsoft.com/library/d...hop/author/dhtml/reference/methods/recalc.asp>

When calling the "recalc" function from the event attribute in your form
control, the resolution of the method name follows a specific schema[1]:
first IE looks up on the form control object whether there is a property
named "recalc" (there's not), then it searches on the form object
(there's not), then it searches on the document object (there's one),
where it finds and calls the native "recalc" function - since your
"recalc" is defined on the window object (that is, "above" the document
object), it is never reached.

Hey, what about using another name for your function;-)
 
R

Richard Cornford

rick wrote:
function recalc() {

document.quote.equiptotal.value = document.quote.qty1.value;

}
Click to expand...
<td class="small"><input type="text" name="qty1" size="4"
onChange="recalc()" maxlength="4"></td>
Click to expand...
<snip>

An unfortunate choice of function names. IE (from 5.5, as I recall) has
a - document.recalc - method, and its custom scope chain for event
handling attribute code generated functions included the - document -
object. So when the function built from - onChange="recalc()" - is
executed the unqualified identifier - recalc - is resolved as -
document.recalc -, which does not do what - window.recalc - would. You
can either change the name of the function, or fully qualify the
reference to it in the attribute string.

Richard.
 
E

Evertjan.

rick wrote on 10 apr 2004 in comp.lang.javascript:
I am new to javascript and would appreciate any help that is offered.
The following script does not work in IE (the value
(document.quote.qty1.value)is not
displayed in the "equiptotal" field).
Can anyone tell where I went wrong? The script works fine in
Mozilla/Firefox.

//The script
function recalc() {

document.quote.equiptotal.value = document.quote.qty1.value;
Click to expand...

recalc() seems to be a reserved name.

change it to myRecalc() and you will be all right.
 
R

rick

Thanks for the help, much appreaciated:)

rick said:
I am new to javascript and would appreciate any help that is offered.
The following script does not work in IE (the value
(document.quote.qty1.value)is not
displayed in the "equiptotal" field).
Can anyone tell where I went wrong? The script works fine in
Mozilla/Firefox.

//The script
function recalc() {

document.quote.equiptotal.value = document.quote.qty1.value;

}

// The Page

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">

<meta name="generator" content="DreamWeaver">

<link rel="stylesheet" type="text/css" href="/css/web-soft.css">

<title>Quotation</title>

<SCRIPT LANGUAGE="JavaScript" src="/javascript/quote.js">

</script>

</head>

<BODY><center>

<form action="" method="post" name="quote">

<div id="quote">

<div id="smallbar">WEB Soft Systems Inc.</div>

Quotation

<table class="quote" cellspacing="2" cellpadding="2">

<tr>

<th>Qty</th>

<th>Item Num</th>

<th>Supplier</th>

<th>Description</th>

<th>Cost</th>

<th>Hrs</th>

</tr>

<tr>

<td class="small"><input type="text" name="qty1" size="4"
onChange="recalc()" maxlength="4"></td>

<td class="medium"><input name="itemnum1" type="text" id="itemnum1"
size="15"></td>

<td class="medium"><input name="supplier1" type="text" id="supplier1"
size="20"></td>

<td class="large"><input name="description1" type="text" id="description1"
size="30"></td>

<td class="medium"><input type="text" name="unitcost1" size="7"></td>

<td class="small"><input type="text" name="labor1" size="4"
maxlength="4"></td>

</tr>

</table>

<br>

<table class="quote" cellspacing="2" cellpadding="0">

<tr>

<th>Company</th>

<th>Site</th>

<th>Contact</th>

<th></th>

</tr>

<tr>

<td class="medlarge">&nbsp;</td>

<td class="medlarge">&nbsp;</td>

<td class="medlarge">&nbsp;</td>

<td><input type="submit" name="select" value="Select"></td>

</tr>

</table>

<br>

<table class="quote" cellspacing="2" cellpadding="0">

<tr>

<td class="medium" align="right">Equip Cost</td>

<td class="medium" align="left"><input type="text" name="equipcost" readonly
size="10"></td>

<td class="medium" align="right">Equip Total</td>

<td class="medium" align="left"><input type="text" name="equiptotal"
readonly size="10"></td>

<td class="medium" align="right">Sub Total</td>

<td class="medium" align="left"><input type="text" name="subtotal" readonly
size="10"></td>

<td class="small" align="left"></td>

</tr>

<tr>

<td class="medium" align="right">Labour Hrs</td>

<td class="medium" align="left"><input type="text" name="totallabor"
size="10" readonly></td>

<td class="medium" align="right">Mark-Up</td>

<td class="medium" align="left"><input type="text" name="markup"
onChange="recalc()" size="3" maxlength="4">%</td>

<td class="medium" align="right">PST 8%</td>

<td class="medium" align="left"><input type="text" name="pst" size="10"
readonly></td>

<td class="small" align="left"><input type="checkbox" name="check1"
value="Value1"></td>

</tr>

<tr>

<td class="medium" align="right">Labour Rate</td>

<td class="medium" align="left"><input type="text" name="laborrate"
size="10" readonly></td>

<td class="medium" align="right">Gross Margin</td>

<td class="medium" align="left"><input type="text" name="grossmargin"
size="10"></td>

<td class="medium" align="right">GST 7%</td>

<td class="medium" align="left"><input type="text" name="gst" size="10"
readonly></td>

<td class="small" align="left"><input type="checkbox" name="check2"
value="Value2"></td>

</tr>

<tr>

<td class="medium" align="right">Total Labour</td>

<td class="medium" align="left"><input type="text" name="laborcost"
size="10" readonly></td>

<td class="medium" align="right">Gross Profit&nbsp;</td>

<td class="medium" align="left"><input type="text" name="grossprofit"
size="10"></td>

<td class="medium" align="right">Total</td>

<td class="medium" align="left"><input type="text" name="total" size="10"
maxlength="10" readonly></td>

<td class="small" align="left"><input type="checkbox" name="check3"
value="Value3"></td>

</tr>

</table><br>

</div>

<div id="footer">Copyright&copy;2004 R.M. Singh</div>

</form>

</body>

</center>

</html>
Click to expand...
 
L

Lasse Reichstein Nielsen

Evertjan. said:
recalc() seems to be a reserved name.
Click to expand...

Not reserved, just used. In IE there is a property of that name on the
document object. Inside an intrinsic event handler, that shadows the
global function defined by the original poster.
It's not that he can't call it "recalc". It's just that he can't
refer to it as just "recalc" inside an intrinsic event handler.
He can use "window.recalc()" instead.
change it to myRecalc() and you will be all right.
Click to expand...

That could also work.
/L
 
E

Evertjan.

Lasse Reichstein Nielsen wrote on 11 apr 2004 in comp.lang.javascript:
That could also work.
Click to expand...

[Not specially to you. Lasse, you know this]

My point is, that, if a function does not [seem to] get called, a
variable does not react as it should, rename it by adding a well known
prefix, so that you do not loose the original naming meaning.

recalc() becomes:
myRecalc() or:
tempRecalc()

An editor with a global [and case sensitive] replace will be very
helpfull.

=============

btw:
In debugging of cource, first save a copy of your work, then set
breakpoints:

function recalc() {
alert("recalc function called") // BREAKPOINT
document.quote.equiptotal.value = document.quote.qty1.value;
}

This, including the fact that no error is registered, will show you that
the function never gets called, but NOT because of a referring mistake,
like

onchange="nonexistingFunction()"

To be even more sure, temporarily breakpoint the onchange by:

onchange="alert('onchange fires');recalc();"
 

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

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Javascript DOM 1
I am using 2 loops, 1 for input and 1 for td. Can we achieve the same functionality with 1 loop in Jquery? 4
Can anyone please help? HTML - two tables applying different styles 4
How can I calculate the last payment of the year to be the sum of all previous payments for that year and subtracting it from Research Costs value? 7
SendGrid email issue in responsive Gmail 1
Getting extra blank rows from appending HTML..? 2

Members online

No members online now.
Total: 32 (members: 1, guests: 31)
Robots: 448

Forum statistics

Threads
473,770
Messages
2,569,583
Members
45,074
Latest member
StanleyFra

Latest Threads

Top