onkeyup in FireFox

Forum Moderators: open

Message Too Old, No Replies

onkeyup in FireFox

trick

6:54 pm on Nov 20, 2009 (gmt 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!

Fotiman

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

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>

trick

7:45 pm on Nov 20, 2009 (gmt 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!

Fotiman

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

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); 
  //... 
};

trick

8:03 pm on Nov 20, 2009 (gmt 0)

thanks!

: )