Фон
У меня есть форма, которую я строю, которая будет функционировать как калькулятор цен. Я слишком долго возился с этим, и теперь я застрял.
По сути, когда пользователь вводит две (на самом деле три) переменные, он будет выдавать три разных вывода.
Три входа:
- Билеты проданы
- Стоимость билета
- Кто оплачивает сбор?
Три выхода:
- Они платят
- Вы платите
- Вам платят (net доход)
Формула довольно проста.
(Продажа билетов) x (Стоимость билетов) = BasePrice (или, если хотите, назовите его валовым доходом)
(Количество проданных билетов x 1 $) + (BasePrice / 100) = Комиссия (это по существу, $ 1 за каждый билет + 1% от BasePrice)
На основе переменной «кто платит сбор» вы получите три результата. Либо они платят базовую цену плюс комиссию, либо они платят базовую цену, а вы платите комиссию. Тогда выручка - это просто то, что они платят за вычетом того, что вы платите, за вычетом комиссии, которая идет третьему лицу независимо от этого.
Пример:
1 билет, проданный за 10 долларов, даст два потенциальные выходы.
Выход 1 - с выбранным «они платят»: 11,10 долларов они платят, 0 долларов вы платите, и доход 10 долларов.
Выход 2 - с выбранным «покрытием сборов»: 10 долларов они платить, 1,10 доллара вы платите, и 8,90 доллара дохода.
Имеет смысл?
Вопрос:
У меня это работает до определенной степени. Мои выходы работают как положено. Но если вы измените первые две переменные, по умолчанию вернется к основному параметру «посетитель платит». Я хочу, чтобы он сохранял выбранный радиовход и отображал правильные выходы независимо от того, какая из трех переменных изменяется. Я уверен, что где-то отсутствует какой-то синтаксис, но из-за всех переменных я могу '
Код ниже, а вот скрипка .
Заранее спасибо!
<div class="pricing-table">
<form id="pricingform" oninput="calculateTotal()">
<div class="price-row grid">
<div class="col-1-2">
Tickets Sold: <input type="text" name="ticketssold" id="ticketssold"> <i class="fas fa-times"></i>
</div>
<div class="col-1-2">
Ticket Price: <input type="text" name="ticketprice" id="ticketprice">
</div>
</div>
<div class="price-row">
<div class="col-full">
Fees:
<input type="radio" name="fees" value="PassOn" onchange="calculateTotal(this.value)" checked> <label>Pass Onto Attendee</label> <input type="radio" name="fees" value="CoverFees" onchange="calculateTotal(this.value)"> <label>Cover the Fees</label>
</div>
</div>
<div class="price-row grid">
<div class="col-1-3">
<label>Attendees Pay:</label><br /> <output id="attendees" name="attendees" for="a b">$0</span>
</div>
<div class="col-1-3">
<label>Estimated Cost:</label><br /> <output style="display:none;" type="hidden" id="percent" me="percent"></output><output id="cost" name="cost">$0</output>
</div>
<div class="col-1-3">
<label>Estimated Revenue:</label><br /> <output id="revenue" name="revenue">$0</output>
</div>
</div>
</form>
</div>
<script>
function getBasePrice() {
var baseprice = parseInt(ticketssold.value)*parseFloat(ticketprice.value);
return baseprice;
}
function getFees() {
var percent = parseFloat(ticketssold.value*ticketprice.value/100);
var dollar = parseInt(ticketssold.value);
var fees = +percent + +dollar;
return fees;
}
function calculateTotal(answer) {
var baseprice = getBasePrice();
var fees = getFees();
if (answer == "CoverFees") {
var attendeespay = +baseprice;
var venuepays = +fees;
var revenuetotal = +baseprice - +fees;
} else {
var attendeespay = +baseprice + +fees;
var venuepays = 0.00;
var revenuetotal = +baseprice;
}
revenue.value = "$"+revenuetotal.toFixed(2);
attendees.value = "$"+attendeespay.toFixed(2);
cost.value = "$"+venuepays.toFixed(2);
};
</script>