Question

我目前在寻找一种可以为我的两个单选按钮定价的方法时遇到麻烦，当点击其中一个按钮时，价格会转到结账页面，用户以后可以在完成预订页面后访问该页面。

所以步骤：

用户点击标准或头等舱机票。
用户点击“数字”的输入值，然后选择他们需要的成人和儿童票数（成人和儿童的数量乘以票价）。
总价格在下面作为输入类型“text”给出。
用户然后点击结帐按钮，该按钮将指引他们进入结帐页面。
用户可以单独查看为成人和儿童购买的门票数量及其价格和总数。

现在我已经设法通过使用变量给标准和头等舱一个价格，现在下一步我很困惑。

<label for="Adult-ticket" class="center-label">Adults(+16)</label>
    <input type="number" id="adult" name="user_adult">

    <label for="child-ticket" class="center-label">Child</label>
    <input type="number" id="child" name="user_child">
    
    <input type="radio" id="Standard" name="Type" value="Standard" onclick="standardfunction()">
    <label class="light" for="Standard">Standard</label><br>
    
    <input type="radio" id="First-Class" name="Type" value="First-Class" onclick="first-classfunction()>
    <label class="light" for="First-Class">First Class</label><br><br>
    <input type = "button" value="checkout" id="checkoutbtn">

Adult = £6
Child = £3

另一个问题是，我如何为单选按钮定价，以便单选按钮是默认的成人价格，但当他们也有儿童票时，它不是一张完整的成人票，而是一半：

{{1}}

Answer 1

重要的是要注意输入值是作为字符串记录的，需要先转换为数字。

首先使用Number或parseInt转换为整数。

您还要声明两次相同的变量，第二次重写第一次。您希望从用户那里获得输入，因此我删除了变量的第二个实例。

另外

alert(Total_Cost = adult *  Type2);

不是正确的语法。它应该是

alert(adult * Type2);

也可以将两个功能组合成一个

现在需要修改您的HTML代码。您需要在按下提交按钮时运行该功能。

＆＃13;

function calculateFare() {
    var option = document.querySelector('input[type=radio]:checked')
    var fare = option.getAttribute("value");
    var ad = Number(document.getElementById('adult').value);
    var ch = Number(document.getElementById('child').value);

    var cost = (fare == "Standard") ? (ad * 6) + (ch * 3) : (ad * 10) + (ch * 5);        

    document.getElementById("total-cost").innerHTML = cost;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label for="Adult-ticket" class="center-label">Adults(+16)</label>
<input type="number" id="adult" name="user_adult">

<label for="child-ticket" class="center-label">Child</label>
<input type="number" id="child" name="user_child">
    
<input type="radio" id="Standard" name="Type" value="Standard">
<label class="light" for="Standard">Standard</label><br>
    
<input type="radio" id="First-Class" name="Type" value="First-Class">
<label class="light" for="First-Class">First Class</label><br><br>
<input type = "button" value="checkout" id="checkoutbtn" onclick="calculateFare()">

<p id="total-cost"></p>

＆＃13;

定价值并将其存储在结帐页面上

1 个答案: