I am trying to calculate values using javascript then update the HTML with them. If I don't defer both scripts then I get the error
"Uncaught TypeError: Cannot set properties of null (setting 'innerHTML') at updateDetailsHTML (breakeven-calc.js:2) at (index):72"
If I defer both scripts I get the error
"(index):72 Uncaught ReferenceError: updateDetailsHTML is not defined at (index):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>
Javascript file "breakeven-calc"
function updateDetailsHTML(pre_icev_car, pre_ev_car, pre_icev_truck, pre_ev_truck){
document.getElementById("car-details").innerHTML = "worked"
}
Have you ever tried moving your scripts inside your body tag?
<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>
copy paste as below
<!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>
Regarding the defer script , you wont need that , it only affect the code within the script if it only has src attribute on it .
and make sure you define the function above then call it in sequence