homepage Welcome to WebmasterWorld Guest from 54.204.58.87
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
simple innerHTML problem
id not being updated
pillsbur




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

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




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


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

you havent set onkeyup...

pillsbur




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

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




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


<!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




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

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved