Javascript to change HTML giving errors-CodePudding

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"
}

CodePudding user response：

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

CodePudding user response：

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>