多个 if 条件语句 javascript/html
[英]Multiple if condition statements javascript/html
问题描述
I'm trying to write a condition where:
我正在尝试编写一个条件，其中：
- if A is true and B is not, then it displays error_message_1如果 A 为真而 B 不为真，则显示 error_message_1
- if B is true and A is not, it displays error_message_2如果 B 为真而 A 不为真，则显示 error_message_2
- if both A and B are NOT true, displays error_message_3如果 A 和 B 都不为真，则显示 error_message_3
First I tried writing all conditions in the same if...else if statement but it was very confusing so I tried putting them in different if statements and the code for that is below.首先，我尝试在同一个 if...else if 语句中编写所有条件，但它非常令人困惑，所以我尝试将它们放在不同的 if 语句中，代码如下。 the problem with this is that the third condition statement is always overridden by the first condition.这样做的问题是第三个条件语句总是被第一个条件覆盖。
Code using html and javascript:使用 html 和 javascript 的代码：
function calculatePrice() { var tourType; var payDate; var returnTrip; var extra = 0; var tourCost = 0; var discount = 0; for (var i = 1; i <= 3; i++) { tourType = document.getElementById("ans" + i); if (tourType.checked == true) { tourCost += parseFloat(tourType.value); } } if (tourCost == 0 && discount !== 0) { alert("Please select a Tour type"); return; } for (var a = 1; a <= 3; a++) { payDate = document.getElementById("date" + a); if (payDate.checked == true) { discount += parseFloat(payDate.value); } } if (discount == 0 && tourType !== 0) { alert("Please select a Payment date."); return; } for (var u = 1; u <= 1; u++) { returnTrip = document.getElementById("return" + u); if (returnTrip.checked == true) { extra += parseFloat(returnTrip.value); } } tourCost = tourCost - discount * tourCost + extra tourCost = parseInt(tourCost) if (tourCost == 0 && discount == 0) { alert("Please select a Tour Type and Payment Date."); return; } else { alert("The approximate cost of the holiday is $" + tourCost); return; } }
<h1>Calculator</h1> <p>Complete the form</p> <form name="packages"> <p> Tour type:<br> <input type="radio" name="tour" id="ans1" value="3900"><label for="ans1">5-day Escape Tour</label><br> <input type="radio" name="tour" id="ans2" value="5100"><label for="ans2">7-day Splendour Tour</label><br> <input type="radio" name="tour" id="ans3" value="6600"><label for="ans3">10-day Best Tour</label> </p> <p> Payment date:<br> <input type="radio" name="dates" id="date1" value="0.1"><label for="date1">Before 1st November 2016</label><br> <input type="radio" name="dates" id="date2" value="0.07"><label for="date2">Between 1st November and 31st December 2016</label><br> <input type="radio" name="dates" id="date3" value="0.05"><label for="date3">After 31st December 2016</label> </p> <p> <label for="return1">Click here if you want to include a return airfare from Australia:</label><input type="checkbox" name="return" id="return1" value="900"> </p> <p> <input type="submit" value="Calculate" onclick="calculatePrice();"><input type="reset" value="Reset"> </p> </form>
Basically what I tried to do at first was to see whether any radio buttons were selected and base my if conditions on those.基本上，我最初尝试做的是查看是否选择了任何单选按钮，并将我的 if 条件建立在这些按钮上。 i tried using if (button.selected) but since each radio button has a different id, it was too long and I didn't know how to group them into one variable which I can use.我尝试使用 if (button.selected) 但由于每个单选按钮都有不同的 id，它太长了，我不知道如何将它们组合成一个我可以使用的变量。
2 个解决方案
解决方案1
0 2016-10-09 10:32:22
- if A is true and B is not, then it displays error_message_1
- if B is true and A is not, it displays error_message_2
- if both A and B are NOT true, displays error_message_3
Is best written with the last condition first:最好先写最后一个条件：
if (!A && !B) { // both are false
display(error_message_3);
} else if (!A) { // if A is false here, B must be true
display(error_message_2);
} else if (!B) { // if B is false here, A must be true
display(error_message_1);
} else { // both are true
display(no_error);
}
解决方案2
-1 2016-10-09 10:27:04
The conditions that you asked are :你问的条件是：
if A is true and B is not, then it displays error_message_1如果 A 为真而 B 不为真，则显示 error_message_1
if B is true and A is not, it displays error_message_2如果 B 为真而 A 不为真，则显示 error_message_2
if both A and B are NOT true, displays error_message_3如果 A 和 B 都不为真，则显示 error_message_3
To check if something is true you need to check if it equals to one, not zero.要检查某事是否为真，您需要检查它是否等于 1，而不是 0。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Travel Agency</title>
<script type="text/javascript">
function calculatePrice() {
var tourType;
var payDate;
var returnTrip;
var extra = 0;
var tourCost = 0;
var discount = 0;
for (var i = 1; i <= 3; i++) {
tourType = document.getElementById("ans" + i);
if (tourType.checked == true) {
tourCost += parseFloat(tourType.value);
}
}
if (tourCost == 1 && discount !== 1) {
alert("Please select a Tour type");
return;
}
for (var a = 1; a <= 3; a++) {
payDate = document.getElementById("date" + a);
if (payDate.checked == true) {
discount += parseFloat(payDate.value);
}
}
if (discount == 1 && tourType !== 1) {
alert("Please select a Payment date.");
return;
}
for (var u = 1; u <= 1; u++) {
returnTrip = document.getElementById("return" + u);
if (returnTrip.checked == true) {
extra += parseFloat(returnTrip.value);
}
}
tourCost = tourCost - discount * tourCost + extra
tourCost = parseInt(tourCost)
if (tourCost !== 1 && discount !== 1) {
alert("Please select a Tour Type and Payment Date.");
return; }
else {
alert("The approximate cost of the holiday is $" + tourCost);
return; }
}
</script>
</head>
<body>
<h1>Calculator</h1>
<p>Complete the form</p>
<form name="packages">
<p>
Tour type:
<br>
<input type="radio" name="tour" id="ans1" value="3900"><label for="ans1">5-day Escape Tour</label>
<br>
<input type="radio" name="tour" id="ans2" value="5100"><label for="ans2">7-day Splendour Tour</label>
<br>
<input type="radio" name="tour" id="ans3" value="6600"><label for="ans3">10-day Best Tour</label>
</p>
<p>
Payment date:
<br>
<input type="radio" name="dates" id="date1" value="0.1"><label for="date1">Before 1st November 2016</label>
<br>
<input type="radio" name="dates" id="date2" value="0.07"><label for="date2">Between 1st November and 31st December 2016</label>
<br>
<input type="radio" name="dates" id="date3" value="0.05"><label for="date3">After 31st December 2016</label>
</p>
<p>
<label for="return1">Click here if you want to include a return airfare from Australia:</label><input type="checkbox" name="return" id="return1" value="900">
</p>
<p>
<input type="submit" value="Calculate" onclick="calculatePrice();"><input type="reset" value="Reset">
</p>
</form>
</body>
</html>
EDIT: Hey guys, basically what i tried to do at first was to see whether any radio buttons were selected and based my if conditions on those.编辑：嘿伙计们，基本上我最初尝试做的是查看是否选择了任何单选按钮，并根据这些条件确定我的条件。 i tried using if (button.selected) but since each radio button has a different id, it was too long and i didn't know how to group them into one variable which i can use.我尝试使用if (button.selected)但由于每个单选按钮都有不同的 ID，它太长了，我不知道如何将它们组合成一个我可以使用的变量。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.