Welcome to WebmasterWorld Guest from 54.227.5.198

Forum Moderators: open

Message Too Old, No Replies

simple innerHTML problem

id not being updated

     

pillsbur

12:17 am on Nov 6, 2007 (gmt 0)

5+ Year Member



Hi,

This should be simple, but it simply doesn't work. Below is a basic reduction of my code. I just want to enter numbers into fields and have the total display dynamically. Sheesh.

<head>
<script language="javascript">
function refreshTotal() {

var form = document.forms['invoice'];

var cost = 0;
for (i=0;i<form.length;i++) {
if (form[i].type == 'text' && isNumber(form[i].value)) {
if (form[i].onkeyup) {
cost += eval(form[i].value);
}
}
}
document.getElementById('total').innerHTML = cost.toFixed(2);
}
</script>
</head>
<body>
<form action="" method="get" id="invoice">
Price 1: <input name="price1" type="text" id="price1" size="10" onblur="refreshTotal();" /><br />
Price 2: <input name="price2" type="text" id="price2" size="10" onblur="refreshTotal();" /><br />
Total: <span id="total"></span>
</form>
</body>

My javascript is suppsed to write the variable "cost" into the innerHTML of the span id called "total". Am I blind and missing something patently obvious?

Thanks!
Glenn

[edited by: encyclo at 5:41 pm (utc) on Nov. 6, 2007]
[edit reason] no URLs thanks [/edit]

mehh

5:09 pm on Nov 6, 2007 (gmt 0)

5+ Year Member




if (form[i].onkeyup) {
cost += eval(form[i].value);
}

you havent set onkeyup...

pillsbur

6:01 pm on Nov 6, 2007 (gmt 0)

5+ Year Member



Sorry. That was a typo when I posted the message. I've changed it be onblur like the rest, but it's still not working.

Thanks,
Glenn

Fotiman

6:31 pm on Nov 6, 2007 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<!-- 1. Stop using the language attribute. It's invalid. -->
<!-- 2. Use the type attribute. It's required -->
<script type="text/javascript">
function isNumber(n) {
return true;
}
function refreshTotal() {
var form = document.forms['invoice'];
var cost = 0;
// 3. Don't forget to 'var' your i variable
var i;
for (i=0;i<form.length;i++) {
if (form[i].type == 'text' && isNumber(form[i].value)) {
// 4. No need to check for onkeyup or onblur here... it's already happened
cost += Number(form[i].value);
}
}
document.getElementById('total').innerHTML = cost.toFixed(2);
}
</script>
</head>
<body>
<form action="" method="get" id="invoice">
Price 1: <input name="price1" type="text" id="price1" size="10" onblur="refreshTotal();" /><br />
Price 2: <input name="price2" type="text" id="price2" size="10" onblur="refreshTotal();" /><br />
Total: <span id="total"></span>
</form>
</body>
</html>

Fotiman

6:32 pm on Nov 6, 2007 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



Note, I'm assuming you have your own isNumber function... I just stuck in a placeholder method since you omitted it from your post.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month