Question

Javascript 更改 HTML 并给出错误

2021-10-13

64

javascript html jquery

我尝试使用 javascript 计算值，然后使用它们更新 HTML。如果我 不推迟两个脚本 ，则会出现错误
“未捕获的 TypeError：无法在 updateDetailsHTML (breakeven-calc.js:2) at (index):72 设置 null 属性（设置 'innerHTML'）”

如果我 推迟两个脚本 ，则会出现错误
“(index):72 未捕获的 ReferenceError：updateDetailsHTML 未在 (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 文件“breakeven-calc”

function updateDetailsHTML(pre_icev_car, pre_ev_car, pre_icev_truck, pre_ev_truck){
    document.getElementById("car-details").innerHTML = "worked"
}

Answer 1

复制粘贴如下

     <!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>

关于延迟脚本，您不需要它，它只会影响脚本内的代码（如果它只有 src 属性）。

并确保你定义了上面的函数，然后按顺序调用它

Answer 2

您是否尝试过将脚本移到 body 标签内？

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