多个if条件语句javascript/html

Multiple if condition statements javascript/html

本文关键字：html javascript 语句 if 条件 多个      更新时间：2023-09-26

我想写一个条件:

  • 如果A为真，B为假，则显示error_message_1
  • 如果B为真而A不为真，则显示error_message_2
  • 如果A和B都不为真，显示error_message_3

首先，我尝试在相同的if中编写所有条件…else if语句，但这是非常令人困惑的，所以我试着把它们放在不同的if语句，下面的代码。这样做的问题是，第三个条件语句总是被第一个条件覆盖。

使用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("answers" + 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="answers1" value="3900"><label for="answers1">5-day Escape Tour</label><br>
        <input type="radio" name="tour" id="answers2" value="5100"><label for="answers2">7-day Splendour Tour</label><br>
        <input type="radio" name="tour" id="answers3" value="6600"><label for="answers3">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>

基本上，我一开始尝试做的是查看是否有任何单选按钮被选中，并根据这些选择我的if条件。我尝试使用if (button.selected)，但由于每个单选按钮有不同的id，它太长了，我不知道如何将它们分组成一个变量，我可以使用

  • 如果A为真，B为假，则显示error_message_1
  • 如果B为真而A不为真，则显示error_message_2
  • 如果A和B都不为真，显示error_message_3

最好将最后一个条件放在前面:

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

您所要求的条件是:

如果A为真而B不为真，则显示error_message_1

如果B为真而A不为真，则显示error_message_2

如果A和B都不为真，则显示error_message_3

要检查某事是否为真，你需要检查它是否等于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("answers" + 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="answers1" value="3900"><label for="answers1">5-day Escape Tour</label>
            <br>
            <input type="radio" name="tour" id="answers2" value="5100"><label for="answers2">7-day Splendour Tour</label>
            <br>
            <input type="radio" name="tour" id="answers3" value="6600"><label for="answers3">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>

编辑:嘿，伙计们，基本上我一开始尝试做的是看看是否有单选按钮被选中，并基于这些我的if条件。我尝试使用if (button.selected)，但由于每个单选按钮都有不同的id，它太长了，我不知道如何将它们分组成一个变量，我可以使用。

相关文章：