Why doesn't this work on Firefox?

Question

I have this code but I can only get it to work in Internet Explore - it doesn't work in Firefox:

var max1box = document.getElementById('length'),
    max2box = document.getElementById('width');
    max1 = 100;
    min1 = 20;
    max2 = 200;
    min2 = 10;

max1box.addEventListener('change',validateValues);
max2box.addEventListener('change',validateValues);

function validateValues() {

    if (this == max1box && this.value > max1 && this.value > max2box.value)
    {
       max1box = max2box; 
       max2box = this;  
    } 

    if (max1box .value > max1) {
        max1box .value = max1;
    }
    if (max1box .value < min1) {
        max1box .value = min1;
    }        

    if (max2box.value > max2) {
        max2box.value = max2;
    }
    if (max2box.value < min2) {
        max2box.value = min2;
    }
   }

http://jsfiddle.net/gdau4/

The Javascript code simply just doesn't work at all. It's as if I've just got two normal text boxes.

I have tested it in Firefox 3.6 and Internet Explore 9.

Answer 1

In method

 addEventListener

The third parameter is required in firefox, and it's a boolean variable standing for event bubling.
You can try

 max1box.addEventListener('change',validateValues,false);
 max2box.addEventListener('change',validateValues,false);

Answer 2

Is this one of those cases where getElementById is actually returning a form element with a name attribute but not an id ..? If so, just add an id attribute with the same value and try again...

Answer 3

You mast add boolean arguments to addEventListener functions, like this:

max1box.addEventListener('change', validateValues, false);

Boolean indicating whether to bind the event as it is propogating towards the target node, (event Capture), or as the event bubbles upwards from the target (event bubble). Set to true or false, respectively.

Read more about window methods