繁体   English   中英

多个 if 条件语句 javascript/html

[英]Multiple if condition statements javascript/html

我正在尝试编写一个条件,其中:

  • 如果 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("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>

基本上,我最初尝试做的是查看是否选择了任何单选按钮,并将我的 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("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>

编辑:嘿伙计们,基本上我最初尝试做的是查看是否选择了任何单选按钮,并根据这些条件确定我的条件。 我尝试使用if (button.selected)但由于每个单选按钮都有不同的 ID,它太长了,我不知道如何将它们组合成一个我可以使用的变量。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM