Multiple if condition statements javascript/html
Question
I'm trying to write a condition where:
- 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
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. the problem with this is that the third condition statement is always overridden by the first condition.
Code using html and 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. 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.
2 answers
solution1
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);
}
solution2
-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
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
To check if something is true you need to check if it equals to one, not zero.
<!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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.