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 class="main">
<div class="specf">
<div class="fields">
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 class="weipri">
<div class="weight">
<label for="weight">Enter weight(in kgs):</label>
<input type="text" name="weight" id="weight" placeholder="weight" class="wandp">
</div>
<div class="weight">
<label for="price">Enter price(USD):</label>
<input type="text" name="price" id="price" placeholder="price(USD)" class="wandp">
</div>
</div>
<button onclick="calculate()">Calculate</button>
</div>
<div class="summary">
<div class="sum">
weight:
<p id="sumweight">0</p>
kg
</div>
<div class="sum">
dimensional weight:
<p id="sumdimweight">0</p>
kg
</div>
<div class="sum">
<strong>
chargeable weight:
<p id="sumcharweight">0</p>
kg
</strong>
</div>
<hr class="line">
<br>
<div class="sum">
Insurance:
<p id="insurance">0</p>
$
</div>
<div class="sum">
transportation:
<p id="transportation">0</p>
$
</div>
<div class="total">
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"))
>Solution :
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);