How to Make Input Checkbox Update Price Total Using Values Include Additional Fees for Total?-CodePudding

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?

CodePudding user response：

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"  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;
}

CodePudding user response：

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>

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>

CodePudding user response：

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