I need to calculate the shipping price based on the product weight.
If I enter a weight between 1 and 10, the shipping price shows incorrectly. How do I fix these errors?
function sprice() {
let a = 0.5;
let b = 1;
let c = 3;
let d = 5;
let e = 10;
let f = 25;
let g = 1; //0-.5
let h = 2; //.6-1
let i = 3; //2-3
let j = 4; //4-5
let k = 5; //6-10
let l = 6; //11-25
let z = 0;
let inc = 0;
let p = document.getElementById("number").value;
let s = 25;
while (p > 0) {
if (p <= a) {
z += g;
}
if (p <= b) {
z += h;
}
if (p <= c) {
z += i;
}
if (p <= d) {
z += j;
}
if (p <= e) {
z += k;
}
if (p <= f) {
z += l;
}
++inc;
let y = inc * z;
document.getElementById("ans").innerHTML = "$" + y;
p -= s;
}
}
<form>
Enter Weight:<input type="text" id="number" name="number" /><br />
<input type="button" value="get" onclick="sprice()" />
</form>
</br>
<p>Shipping Price:<span id="ans"></span></p>
Logic
The issue that you had was you had to use else if instead of simple else because if you enter a value, say 0.1, it satisfies all the if conditions. And the sum will be wrong. Also, you don't have to multiply your increment index with the same like y = (inc*z);. You just need to keep on adding the sum in a loop decrementing 25 each time while executing the loop.
Working Fiddle
function sprice() {
let a = 0.5; let b = 1; let c = 3; let d = 5; let e = 10; let f = 25;
let g = 1; //0-.5
let h = 2; //.6-1
let i = 3; //2-3
let j = 4; //4-5
let k = 5; //6-10
let l = 6; //11-25
let z = 0;
let userInput = +document.getElementById("number").value;
let s = 25;
let quantity = 0;
while (userInput > 0) {
quantity = userInput > s ? s : userInput;
if (quantity <= a) {
z += g;
} else if (quantity <= b) {
z += h;
} else if (quantity <= c) {
z += i;
} else if (quantity <= d) {
z += j;
} else if (quantity <= e) {
z += k;
} else if (quantity <= f) {
z += l;
}
userInput -= s;
}
document.getElementById("ans").innerHTML = "$" + z;
}
<form>
Enter Weight:<input type="text" id="number" name="number" /><br />
<input type="button" value="get" onclick="sprice()" />
</form> </br>
<p>Shipping Price:<span id="ans"></span></p>
You should be able to simplify your logic here, creating a function getShippingPrice() to get the shipping price for a given weight, then adding to the total price until all the weight is accounted for:
function sprice()
{
let weight = Number(document.getElementById("number").value);
let s = 25;
let totalPrice = 0;
while (weight > 0) {
totalPrice += getShippingPrice(weight);
weight -= s;
}
document.getElementById("ans").innerHTML = "$" + totalPrice;
}
function getShippingPrice(weight) {
if (weight <= 0.5 ) return 1;
if (weight <= 1 ) return 2;
if (weight <= 3 ) return 3;
if (weight <= 5 ) return 4;
if (weight <= 10 ) return 5;
return 6;
}
<form>
Enter Weight:<input type="text" id="number" name="number"/><br/>
<input type="button" value="get" onclick="sprice()"/>
</form> </br>
<p>Shipping Price:<span id="ans"></span></p>
Here is a much more clean, reliable and scalable solution. I think the code is fairly simple so I won't explain it. But if you don't understand anything feel free ask me :)
// Add more categories if you need
const categories = [{
price: 1,
range: [0, 0.5]
},
{
price: 2,
range: [0.6, 1]
},
{
price: 3,
range: [2, 3]
},
{
price: 4,
range: [4, 5]
},
{
price: 5,
range: [6, 10]
},
{
price: 6,
range: [11, 25]
},
];
const [priceForMaxWeight, maxWeight] = categories.reduce(
([maxPrice, maxWeight], category) => {
const [min, max] = category.range;
if (min < 0 || max < 0 || min === max || min > max)
throw new Error(`Invalid range: [${min}, ${max}]`);
return max > maxWeight ? [category.price, max] : [maxPrice, maxWeight];
}, [Infinity, -Infinity]
);
function getPrice(weight) {
const isInRange = (value, [min, max]) => value >= min && value <= max;
for (let i = 0; i < categories.length; i++) {
const {
price,
range
} = categories[i];
if (isInRange(weight, range)) return price;
}
throw new Error(`Weight: ${weight} doesn't fall into any category.`);
}
function calculatePrice(weight) {
if (weight < 0) throw new Error(`Invalid weight: ${weight}`);
if (weight > maxWeight)
return priceForMaxWeight + calculatePrice(weight - maxWeight);
return getPrice(weight);
}
// Interacting with dom
const calculateButton = document.getElementById("btn");
const result = document.getElementById("result");
const weightInput = document.getElementById("weight");
calculateButton.addEventListener("click", () => {
const weight = Number(weightInput.value);
result.innerText = calculatePrice(weight) + "$";
});
<p>Enter Weight:</p>
<input id="weight" type="number" min="0" /><br />
<button id="btn">Calculate Price</button>
<p>Price: <span id="result">0$</span></p>