Estoy tratando de calcular valores usando javascript y luego actualizo el HTML con ellos. Si no aplazo ambos scripts , aparece el error
"TypeError no detectado: no se pueden establecer las propiedades de nulo (configurando 'innerHTML') en updateDetailsHTML (breakeven-calc.js:2) en (índice): 72"
Si aplazo ambos scripts me sale el error
"(índice): 72 Error de referencia no capturado: updateDetailsHTML no está definido en (índice): 72"
HTML Coded <head> <script defer src="../static//js/breakeven-calc.js"></script> <script defer type="text/javascript"> /* Creates vars to pass to function */ let G22_Car = parseFloat("{{data.get('G22_Car')}}") let G23_Car = parseFloat("{{data.get('G23_Car')}}") let Q23_Car = parseFloat("{{data.get('Q23_Car')}}") let Q24_Car = parseFloat("{{data.get('Q24_Car')}}") let G22_Truck = parseFloat("{{data.get('G22_Car')}}") let G23_Truck = parseFloat("{{data.get('G23_Car')}}") let Q23_Truck = parseFloat("{{data.get('Q23_Truck')}}") let Q24_Truck = parseFloat("{{data.get('Q24_Truck')}}") let pre_icev_car = G22_Car + G23_Car let pre_ev_car = Q23_Car + Q24_Car let pre_icev_truck = G22_Truck + G23_Truck let pre_ev_truck = Q23_Truck + Q24_Truck console.log(pre_ev_car) console.log(pre_icev_car) console.log(pre_ev_truck) console.log(pre_icev_truck) /* Function in breakeven-calc*/ updateDetailsHTML(pre_icev_car, pre_ev_car, pre_icev_truck, pre_ev_truck) </script> </head> <body> <p id="car-details"> Pre-ownership CO2e emissions (reference values apply): <br> EV: MTCO2e/Year <br> ICEV: MTCO2e/Year </p> </body>Archivo Javascript "calculo de equilibrio"
function updateDetailsHTML(pre_icev_car, pre_ev_car, pre_icev_truck, pre_ev_truck){ document.getElementById("car-details").innerHTML = "worked" }¿Alguna vez ha intentado mover sus guiones dentro de la etiqueta de su cuerpo?
<body> <p id="car-details"> Pre-ownership CO2e emissions (reference values apply): <br> EV: MTCO2e/Year <br> ICEV: MTCO2e/Year </p> {{-- put all your scripts here--}} </body>copie y pegue como se muestra a continuación
<!doctype html> <html> <head> <script> <!-- let G22_Car = parseFloat("{{data.get('G22_Car')}}") let G23_Car = parseFloat("{{data.get('G23_Car')}}") let Q23_Car = parseFloat("{{data.get('Q23_Car')}}") let Q24_Car = parseFloat("{{data.get('Q24_Car')}}") let G22_Truck = parseFloat("{{data.get('G22_Car')}}") let G23_Truck = parseFloat("{{data.get('G23_Car')}}") let Q23_Truck = parseFloat(" {{data.get('Q23_Truck')}}") let Q24_Truck = parseFloat(" {{data.get('Q24_Truck')}}") let pre_icev_car = G22_Car + G23_Car let pre_ev_car = Q23_Car + Q24_Car let pre_icev_truck = G22_Truck + G23_Truck let pre_ev_truck = Q23_Truck + Q24_Truck console.log(pre_ev_car) console.log(pre_icev_car) console.log(pre_ev_truck) console.log(pre_icev_truck) /* Function in breakeven-calc*/ function updateDetailsHTML(pre_icev_car, pre_ev_car, pre_icev_truck, pre_ev_truck){ document.getElementById("car-details").innerHTML = "worked" updateDetailsHTML(pre_icev_car, pre_ev_car, pre_icev_truck, pre_ev_truck) } --> </script> </head> <body> <div id='car-details'> Pre-ownership CO2e emissions (reference values apply): <br> EV: MTCO2e/Year <br> ICEV: MTCO2e/Year </div> </body> </html>Con respecto al script diferido, no lo necesitará, solo afectará el código dentro del script si solo tiene el atributo src.
y asegúrese de definir la función anterior y luego llamarla en secuencia