JavaScript DOM doesn't respond-CodePudding

I am trying to make mini delivery project. This is page to calculate the price of shipment. It calculates insurance price and shipping price, but it doesn't sum up in the "total" section. On the output, it writes NaN$ and that's all. I tried what I knew, also used internet but couldn't solve this bug. What is the mistake here? Why doesn't it sum up? (Don't mind design)

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="./pricelalc.css">
      <script src="./pricecalc.js"></script>
      <title>Price calculator</title>
      <div >
         <div >
            <div >
               enter dimensions(in cms):
               <input type="text" id="width" placeholder="width">
               <input type="text" id="height" placeholder="height">
               <input type="text" id="length" placeholder="length">
            </div>
            <div >
               <div >
                  <label for="weight">Enter weight(in kgs):</label>
                  <input type="text" name="weight" id="weight" placeholder="weight" >
               </div>
               <div >
                  <label for="price">Enter price(USD):</label>
                  <input type="text" name="price" id="price" placeholder="price(USD)" >
               </div>
            </div>
            <button onclick="calculate()">Calculate</button>
         </div>
         <div >
            <div >
               weight:
               <p id="sumweight">0</p>
               kg
            </div>
            <div >
               dimensional weight:
               <p id="sumdimweight">0</p>
               kg
            </div>
            <div >
               <strong>
                  chargeable weight:
                  <p id="sumcharweight">0</p>
                  kg
               </strong>
            </div>
            <hr >
            <br>
            <div >
               Insurance: 
               <p id="insurance">0</p>
               $
            </div>
            <div >
               transportation: 
               <p id="transportation">0</p>
               $
            </div>
            <div >
               total: 
               <p id="sum">0</p>
               $
            </div>
         </div>
      </div>
   </head>
   <body>
   </body>
</html>

function calculate() {
    const weight = document.getElementById("weight").value;
    const width = document.getElementById("width").value;
    const height = document.getElementById("height").value;
    const length = document.getElementById("length").value;
    const price = document.getElementById("price").value;

    let sumweight = document.getElementById("sumweight");
    let sumdimweight = document.getElementById("sumdimweight");
    let sumcharwe = document.getElementById("sumcharweight");
    let transportation = document.getElementById("transportation");
    let insurance = document.getElementById("insurance");
    let total = document.getElementById("sum");
    sumweight.innerHTML = weight;
    sumdimweight.innerHTML = length * width * height / 6000;
    if (weight > length * width * height / 6000) {
        sumcharwe.innerHTML = weight;
        transportation.innerHTML = weight * 9;
    }
    if (weight < length * width * height / 6000) {
        sumcharwe.innerHTML = length * width * height / 6000;
        transportation.innerHTML = length * width * height / 6000 * 9;
    }
    insurance.innerHTML = price * 0.1;
    console.log(insurance);

    total.innerHTML = parseInt(insurance)   parseInt(transportation);

}

console.log(document.getElementById("sumcharweight"))

CodePudding user response：

total.innerHTML=parseInt(insurance) parseInt(transportation);

This line is the problem. insurance and transportation are DOM elements, not strings. You probably meant to call parseInt on their innerHTMLs

total.innerHTML=parseInt(insurance.innerHTML) parseInt(transportation.innerHTML);