定价值并将其存储到结帐页面上访问

Question

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

因此，分步骤：

1. 用户单击标准或头等舱票。
2. 用户单击“number”的输入值，并选择他们需要多少成人和儿童票(成人和儿童的数量乘以票价)。
3. 总价格作为输入类型“文本”在下面给出。
4. 然后，用户单击“结帐”按钮，该按钮将指向结帐页。
5. 用户将能够单独看到为成人和儿童购买的门票数量，以及他们的价格和总数。

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

​

function standardfunction() {

  var Type1 = document.getElementById('Standard').value;
  var adult = document.getElementById('adult').value;
  var child = document.getElementById('child').value;


  var Total_Cost
  var Type1 = 6
  var adult = 1
  var child = 0.5

  alert(Total_Cost = adult * Type1);

}

function firstclassfunction() {

  var Type2 = document.getElementById('First-Class').value;
  var adult = document.getElementById('adult').value;
  var child = document.getElementById('child').value;

  var Total_Cost
  var Type2 = 10
  var adult = 1
  var child = 0.5
  alert(Total_Cost = adult * Type2);

}

<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

Answer 1

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

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

您还将声明相同的变量两次，第二次声明将覆盖第一个变量。您希望从用户那里获得输入，所以我删除了变量的第二个实例。

也是

alert(Total_Cost = adult *  Type2);

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

alert(adult * Type2);

还可以将这两个函数合并为一个

您的HTML代码现在需要修改。当按下submit按钮时，您需要运行该函数。

​

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

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

​