Question

I’m trying to port an old JavaScript calculator from a legacy site to a new site. The legacy calculator is a form that contains a mess of table/div markup. There is just one JS file that handles all of the logic for this calculator. As you fill out each input field in the calc, onChange() calls the function defined in the JS file. This is all good; there are no errors showing in Chrome dev tools, and I get the results I expect.

Since this calculator is a mess of markup, I’ve stripped out a lot of unnecessary elements and inline styles to create a shorter (markup length) form. The problem is that when I try and use the calculator with my new markup and the same legacy JS file, it doesn’t work. Or, I should say, about 98% of it doesn’t work. It still seems to be outputting some numbers but not everything. As soon as I switch back to the old markup, it works again.

With my new markup, I get a “cannot read property length of undefined”. I don’t see how to fix this because I know some of the fields are submitting their values to the JS. I also don’t understand why there are no errors and the calc works as expected using the old html (seen at the JSFiddle link below).

Update: here is a complete example: http://machinesandwich.com/demo.html

Answer 1

This was kind of a pain to find, but the short of it is that your markup is not consistent with what the JavaScript expects (in multiple places).

The first instance I could find is your new markup contains two form fields both named ISB_Elec.

In that instance, when the onchange event is triggered, fnISBud(form) is called and, subsequently, calls fnStrToInt(form.ISB_Elec.value). fnStrToInt is expecting a string but with two form elements with the same name, it’s getting passed a NodeList. The for loop is then throwing an exception.

This happens in at least one other place where two form fields are both named ISB_Trans_Other.

Lastly, your fnISBud(form) function does a bunch of field-specific calculations, and in one place calls fnStrToInt(form.ISB_Ins_Auto.value), however there is no input named ISB_Ins_Auto in your markup – again throwing an exception.

In summary, double-check your markup and be sure you have properly included and named each <input /> element that your JS functions are expecting.