Welcome to WebmasterWorld Guest from 54.196.232.162

Forum Moderators: open

Message Too Old, No Replies

onkeyup in FireFox

     
6:54 pm on Nov 20, 2009 (gmt 0)

New User

5+ Year Member

joined:Dec 12, 2007
posts:26
votes: 0


Hi! I'm having trouble with some JS in FireFox. It works fine in other browsers, and I know I'm missing something to make it work in FireFox, I just don't know what.

I have multiple text fields like this:

<input type="text" id='updateA1' name="updateA1" size="2" value="0" onkeyup="updateA();" />

and a function like so (trimmed it a bit):

function updateA() {
var totalA =
parseFloat(updateA1.value) +
parseFloat(updateA2.value);
....
};

so basically whenever a number is typed in the text fields, it calculates a total and outputs it to the page. Like I said, it works fine except in FireFox.

What do I need to do to make the onkeyup work in FireFox? It is never triggered.

Thanks!

7:15 pm on Nov 20, 2009 (gmt 0)

Senior Member from US 

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

joined:Oct 17, 2005
posts:4966
votes: 10


Seems to work for me in Firefox. Perhaps there is something missing from the trimmed bit that is causing you problems? Here's my working example:


<html>
<head>
<title>Test</title>
</head>
<body>
<input type="text" id='updateA1' name="updateA1" size="2" value="0" onkeyup="updateA();" />
<script type="text/javascript">
function updateA() {
var u = document.getElementById('updateA1');
alert(u.value);
}
</script>
</body>
</html>
7:45 pm on Nov 20, 2009 (gmt 0)

New User

5+ Year Member

joined:Dec 12, 2007
posts:26
votes: 0


You're right, that does work -- I think because you're doing it a bit differently:

I get the input this way: var totalA = parseFloat(updateA1.value)
You get the input this way: var u = document.getElementById('updateA1')

is there any way to shorten that code, or do I need to declare a variable for each input?

thanks!

7:57 pm on Nov 20, 2009 (gmt 0)

Senior Member from US 

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

joined:Oct 17, 2005
posts:4966
votes: 10


You could access it via the named form item, but the code to do that would be even longer. But you can't simply specify a value and expect that the browser will interpret that to mean some element in the DOM. Even if that were possible it would make it more difficult to debug the script, as it may not be clear where updateA1 is defined (is it a global variable? Is it a DOM element?).

Also, if you're going to be doing numeric calculations on the value, you'll probably want to perform some validation on the items anyway, so getting them into a variable is a good thing. It's considered good practice to define your variables at the beginning of the function. If you don't care about validation you could still do something like this:


function updateA() {
var updateA1 = document.getElementById('updateA1'),
updateA2 = document.getElementById('updateA2'),
totalA = parseFloat(updateA1.value) + parseFloat(updateA2.value);
//...
};
8:03 pm on Nov 20, 2009 (gmt 0)

New User

5+ Year Member

joined:Dec 12, 2007
posts:26
votes: 0


thanks!

: )

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members