So I made this basic checkbox price app that updates the food price whenever you click on a checkbox option https://codepen.io/shodoro/pen/GRQNXyq
However, I had to hard code the prices in the javascript, but I want to know how I can update the prices based on the value in the input tag
So for this example in the index.html the value is set to 10, so instead of hard coding the price of 10 in JS, I can just add the value attribute instead
<input type="checkbox" name="item1" id="item1" value="10" onClick="updatePrice()">
Also, how would I make my code scalable? because right now I wrote a bunch of if else if else statments manually, however if I were to add 50 new menu items, then that wouldn't be feasible for my JS code.
function updatePrice() {
let price = 0.00;
if (document.getElementById("item1").checked == true) {
price = 10;
}
if (document.getElementById("item2").checked == true && document.getElementById("item1").checked == true) {
price = 17;
} else if(document.getElementById("item2").checked == true) {
price = 7
}
if (document.getElementById("item3").checked == true && document.getElementById("item1").checked == true && document.getElementById("item2").checked == true) {
price = 20;
} else if (document.getElementById("item3").checked == true && document.getElementById("item1").checked == true) {
price = 13
} else if (document.getElementById("item3").checked == true && document.getElementById("item2").checked == true) {
price = 10
} else if (document.getElementById("item3").checked == true){
price = 3
}
document.getElementById("price").innerText = "Your order total is: $" + price;
}
Lastly, I have the basic total part for the food to work, but I don't know how I would convert my JS code to also include the delivery fees, taxes, tip % added to the final total?
Any ideas?
To read the prices dynamically from the value property of the checkboxes, not much is missing. All that is needed is to read the "value" property of the corresponding element. If you only want to calculate the prices together, the following code is all you need.
Add a class to your checkbox elements. In this case its class item:
<input type="checkbox" name="item1" id="item1" class="item" value="10" onClick="updatePrice()">
Then you can loop through all the checkboxes with the class item and calculate the price dynamically:
function updatePrice() {
let price = 0.00;
const checkboxes = document.getElementsByClassName("item");
for(let i = 0; i < checkboxes.length; i++) {
if(checkboxes[i].checked) price += Number(checkboxes[i].value);
}
document.getElementById("price").innerText = "Your order total is: $" + price;
}
you can do that...
const myForm = document.forms['my-form'];
myForm.reset();
myForm.oninput =_=>
{
let sum = 0;
['item1','item2','item3'].forEach( chkBxNm =>
{
if (myForm[chkBxNm].checked) sum += +myForm[chkBxNm].value
})
myForm.total.textContent = `Your order total is: $${sum}`
}
myForm.onsubmit = e =>
{
e.preventDefault() // disable submit
}label,
output {
display: block;
}
output {
color : green;
font-size : 1.4em;
margin-top : 1.2em;
}<form action="" name="my-form">
<label><input type="checkbox" name="item1" value="10"> 12 piece wings $10</label>
<label><input type="checkbox" name="item2" value="7"> 6 piece wings $7</label>
<label><input type="checkbox" name="item3" value="3"> Large fries $3</label>
<output name="total">Your order total is: $0 </output>
</form>or
const myForm = document.forms['my-form'];
myForm.reset();
myForm.oninput =_=>
{
let sum = 0;
myForm.querySelectorAll('input[type=checkbox]').forEach( chkBx =>
{
if (chkBx.checked) sum += +chkBx.value
})
myForm.total.textContent = `Your order total is: $${sum}`
}
myForm.onsubmit = e =>
{
e.preventDefault() // disable submit
}label,
output {
display: block;
}
output {
color : green;
font-size : 1.4em;
margin-top : 1.2em;
}<form action="" name="my-form">
<label><input type="checkbox" value="10"> 12 piece wings $10</label>
<label><input type="checkbox" value="7"> 6 piece wings $7</label>
<label><input type="checkbox" value="3"> Large fries $3</label>
<output name="total">Your order total is: $0 </output>
</form>here is the easy solution for this code https://codepen.io/mallick-portfolio/pen/KKQNbZZ?editors=1010 you can add more checkboxes that will automatically calculate the price.
js here
function updatePrice() {
let price = 0.00;
const checkboxes = document.getElementsByClassName("item");
for(let i = 0; i < checkboxes.length; i++) {
if(checkboxes[i].checked) price += parseInt(checkboxes[i].value);
}
document.getElementById("price").innerText = "Your order total is: $" + price;
} updatePrice()