javascript - 定值(value)并存储它们以在结帐页面上访问

Question

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

所以步骤:

1. 用户点击标准或头等舱机票。
2. 用户点击“number”的输入值，然后选择他们需要的成人和 child 票的数量(成人和 child 的数量乘以票价)。
3. 总价在下方作为输入类型“文本”给出。
4. 然后用户点击结帐按钮，这会将他们引导至结帐页面。
5. 用户将能够单独查看为成人和 child 购买的门票数量，以及他们的价格和总价。

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

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

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

Adult = £6
Child = £3

Answer 1

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

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

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

还有

alert(Total_Cost = adult *  Type2);

不是正确的语法。应该是

alert(adult * Type2);

也可以将这两个功能合二为一

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

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>