Question

I have the following JS fee calculator on a web site:
http://jsfiddle.net/billsinc/HMFYK/

function updateOutput() {

//get form 
var form = document.getElementById('calc');
var x = form.elements['x'].value;
x = x.replace(/,/g, "");

// determine multiplier
if (x > 11111 && x < 83333) {
    y = 0.009;
}
if (x >= 83333 && x < 166667) {
    y = 0.007;
}
if (x >= 166667 && x < 250000) {
    y = 0.006;
}
if (x >= 250000) {
    y = 0.005;
}

// add data addon
if (form.elements['pd'].checked === true) {
    p = 250;
}
else {
    p = 0;
}

// calculate monthly price
if (x > 11111) {
    form.elements['z'].value = Math.round(eval(parseInt(x, 10) * y + p));
}
else {
    form.elements['z'].value = Math.round(eval(100 + p));
}
}​

If you enter “12000” (or some number greater than 11,111) it will properly calculate in FF, Chrome and Safari.

I’ve been unable to get it to work in IE. It throws the following error after entering a value:

SCRIPT5007: Unable to set value of the property ‘value’: object is null or undefined

I’ve seen this error a number of times on SO but all the resolutions are related .Net or some issue with embedding Flash.

Any help would be appreciated…thanks in advance!

Answer 1

It appears that IE does not include <output> elements in the form.elements collection, so form.elements['z'] is undefined in IE. (If you click the link, you’ll see that <output> is not supported until IE10.) Other browsers do include <output>s in their elements collections.

Either make z into a read-only <input>, or give your <output> an id and get it with document.getElementById.