我目前无法找到一种方法来为我的两个单选按钮定价,当点击其中一个按钮时,价格会转到结帐页面,用户可以在完成预订页面后访问该页面。
所以步骤:
- 用户点击标准或头等舱机票。
- 用户点击“number”的输入值,然后选择他们需要的成人和 child 票的数量(成人和 child 的数量乘以票价)。
- 总价在下方作为输入类型“文本”给出。
- 然后用户点击结帐按钮,这会将他们引导至结帐页面。
- 用户将能够单独查看为成人和 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
最佳答案
需要注意的是,输入值被记录为字符串,需要先转换为数字。
首先使用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>
关于javascript - 定值(value)并存储它们以在结帐页面上访问,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33976287/