¿Por qué hay un error JS en este formulario, según el marcado utilizado?

Estoy tratando de transferir una calculadora de JavaScript antigua de un sitio heredado a un sitio nuevo. La calculadora heredada es un formulario que contiene un lío de marcado de tabla/div. Solo hay un archivo JS que maneja toda la lógica de esta calculadora. A medida que completa cada campo de entrada en el cálculo, onChange() llama a la función definida en el archivo JS. Todo esto está bien; no se muestran errores en las herramientas de desarrollo de Chrome y obtengo los resultados que esperaba.

Dado que esta calculadora es un desastre de marcado, eliminé muchos elementos innecesarios y estilos en línea para crear un formulario más corto (longitud de marcado). El problema es que cuando trato de usar la calculadora con mi nuevo marcado y el mismo archivo JS heredado, no funciona. O, debería decir, alrededor del 98% no funciona. Todavía parece estar generando algunos números, pero no todo. Tan pronto como vuelvo al marcado anterior, vuelve a funcionar.

Con mi nuevo marcado, obtengo un "no se puede leer la propiedad de longitud indefinida". No veo cómo solucionar esto porque sé que algunos de los campos envían sus valores al JS. Tampoco entiendo por qué no hay errores y el cálculo funciona como se esperaba usando el html antiguo (visto en el enlace JSFiddle a continuación).

Actualizar: aquí hay un ejemplo completo: http://machinesandwich.com/demo.html

preguntado el 12 de junio de 12 a las 20:06

Tal vez consideraría acortar un poco su pregunta para resaltar su problema específico. Independientemente, sin embargo, ¿qué línea de JS arroja el error? -

Además, ¿cómo se reproduce el error en su violín? -

Ok, lo siento @Colin - mira Noticias sobre. Una vez que se llama a la función fnStrToInt(), aparece el error. -

1 Respuestas

Fue un poco doloroso encontrarlo, pero en resumen es que su marcado no es consistente con lo que espera JavaScript (en varios lugares).

La primera instancia que pude encontrar es que su nuevo marcado contiene dos campos de formulario, ambos llamados ISB_Elec.

En ese caso, cuando el onchange se activa el evento, fnISBud(form) se llama y, posteriormente, se llama fnStrToInt(form.ISB_Elec.value). fnStrToInt está esperando una cadena pero con dos elementos de formulario con el mismo nombre, se le pasa un lista de nodos. Las for loop está lanzando una excepción.

Esto sucede en al menos otro lugar donde se nombran dos campos de formulario ISB_Trans_Other.

Por último, tu fnISBud(form) hace un montón de cálculos específicos de campo, y en un solo lugar llama fnStrToInt(form.ISB_Ins_Auto.value), sin embargo, no hay ninguna entrada nombrada ISB_Ins_Auto en su marcado, nuevamente lanzando una excepción.

En resumen, verifique dos veces su marcado y asegúrese de haber incluido y nombrado correctamente cada <input /> elemento que esperan sus funciones JS.

Respondido el 12 de junio de 12 a las 23:06

¡Gracias, Colín! ¡Ese era el problema! Empecé a sospechar eso después de horas de intentar cambiar el JavaScript. Revisé el código, solucioné los problemas y ahora todo funciona. - marca bubel

@MarkBubel: ¡Feliz de ayudar! Me alegro de haber solucionado tu problema. - colin brock

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.