【发布时间】：2020-01-10 01:01:35
【问题描述】：
背景
我正在构建一个可用作价格计算器的表单。我已经搞砸了太久，现在我被卡住了。
基本上，当用户输入两个（实际上是三个）变量时，它会产生三个不同的输出。
三个输入：
- 售票
- 票价
- 谁支付费用？
三个输出：
- 他们付钱
- 你付钱
- 您获得报酬（净收入）
公式相当简单。
（售出的门票）x（门票成本）= BasePrice（如果你愿意，也可以称之为总收入）
（售出的门票数量 x 1 美元）+（基本价格/100）= 费用（这实际上是每张门票 1 美元 + 基本价格的 1%）
根据“谁支付费用”变量，您可以获得三个输出。要么他们支付基础价格加费用，要么他们支付基础价格而你支付费用。那么收入就是他们支付的金额减去您支付的金额，再减去费用，无论如何都会流向第三方。
示例：
以 10 美元出售的一张票将产生两个潜在的输出。
输出 1 - 选择“他们支付”：他们支付 11.10 美元，您支付 0 美元，收入 10 美元。
输出 2 – 选择“支付费用”：他们支付 10 美元，您支付 1.10 美元，收入 8.90 美元。
有意义吗？
问题：
我有这个工作到一定程度。 我的输出按预期工作。但是，如果您更改前两个变量，它会默认回到主要的“参加者付费”设置。无论三个变量中的哪一个发生变化，我都希望它保持所选的无线电输入并显示正确的输出。我确定我只是在某处遗漏了一些语法，但是由于所有变量，我可以没找到。
代码如下，这里是fiddle。
提前谢谢你！
<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>
【问题讨论】：
标签： javascript html forms input