How can I realize a staggered pricing model based on groups of four?-CodePudding

hi i want to apply loop for on this equation const adultPrice = privateAdultPrice (adults -1) * privateAdultPrice2 and setting the limit on adults that after every 4 it repeats

updateTotal();

function increaseCount(e, el) {
  var input = el.previousElementSibling;
  var value = parseInt(input.value, 10);
  value = isNaN(value) ? 0 : value;
  value  ;
  input.value = value;
  updateTotal();
}

function decreaseCount(e, el) {
  var input = el.nextElementSibling;
  var value = parseInt(input.value, 10);
  if (value > 1) {
    value = isNaN(value) ? 0 : value;
    value--;
    input.value = value;
    updateTotal();
  }
}

function decreaseCount2(e, el) {
  var input = el.nextElementSibling;
  var value = parseInt(input.value, 10);
  if (value > 0) {
    value = isNaN(value) ? 0 : value;
    value--;
    input.value = value;
    updateTotal();
  }
}


function calculateTotal() {
  const privateAdultPrice = 500;
  const privateAdultPrice2 = 125;



  const adults =  document.querySelector('#adults').value;


  const isPrivate = document.getElementById('private').checked;
 

  const adultPrice = privateAdultPrice   (adults -1) * privateAdultPrice2

  for (let i = adultPrice ; adults < 5;   i)

  return i ;
}

function updateTotal() {
  const total = calculateTotal();
  console.log(total);
  document.querySelector('#amount').value = total;

  
}
updateTotal();

<div ><label > Total USD:</label><input type="number" id="amount" readonly></label> >
<div >

  <div class='down' onclick='decreaseCount(event, this)'>-</div>
  <input id="adults" type='text' value='1' readonly>
  <div class='up' onclick='increaseCount(event, this)'> </div>
</div>
<div style="display: flex; width: 100%">
  <input type="radio" name="occupancy" id="private"  autocomplete="off" checked="checked" onclick="updateTotal()">
  <label for="private">Private</label>
  
  <input type="radio" name="occupancy" id="shared" value="Shared Evening Safari" autocomplete="off" onclick="updateTotal()">
                    <label for="shared">Shared</label>

hi i want to apply loop for on this equation const adultPrice = privateAdultPrice (adults -1) * privateAdultPrice2 and setting the limit on adults that after every 4 it repeats

is it possible or i am in in illusion which is not possible at-all please help me on this one

for (let i = adultPrice ; adults < 5;   i)

this is the problem i guess its not repeating

edited ------------------------------------------- formula should be applied depending on checkbox let say a person select shared check box then price should change qty 1 = 125 and 125 x qty if private selected then your formula should be applied

CodePudding user response：

Maybe this is more what you are looking for?

const [ttl,adults,shared]=["amount","adults","shared"].map(id=>document.getElementById(id));
function calc(){ttl.value=(shared.checked?0:375)*Math.ceil(adults.value/4) (adults.value*125);}
shared.onclick=calc;
document.querySelectorAll(".updown").forEach(el=>el.onclick=ev=>{
 adults.value=Math.max(1, adults.value (ev.target.textContent==" "?1:-1));
 calc();
});
calc();

<div ><label > Total USD:</label><input type="number" id="amount"  readonly></label>
<div >
<div >-</div>
<input id="adults" type='text' value='1' readonly>
<div > </div>
</div>
<div style="display: flex; width: 100%">
  <input type="checkbox" name="occupancy" id="shared">
  <label for="shared">shared evening safari (reduced price)</label>

As soon as a new group of 1 to 4 people is started, a base sum of $375 is added to the per-person charge of $125.

UPDATE

The shared checkbox now replaces the private one. If it is checked then the extra $375 starting each group for 4 will not e applied. If a smaller amount should still be applicable then that must be used in the formular instead of 0 : (shared.checked?0:375).