Несколько операторов условия if javascript / html

ProgramBox

Несколько операторов условия if javascript / html

Post author:admin
Запись опубликована:9 февраля, 2023
Post category:Вопросы по программированию

#javascript

Вопрос:

Я пытаюсь написать условие, при котором:

если A имеет значение true, а B — нет, то отображается error_message_1
если значение B равно true, а значение A — нет, отображается error_message_2
если оба значения A и B неверны, отображается ошибка_мессаге_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 amp;amp; 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 amp;amp; 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 amp;amp; 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 (кнопка.выбрано) но поскольку у каждой переключающей кнопки свой идентификатор, это было слишком долго, и я не знал, как сгруппировать их в одну переменную, которую я могу использовать.

1. Разве ваш не == 0 указывает true и != 0 не указывает false ? Если это так, вы просто путаетесь с этими 2 в вашем 3-м условии, поскольку вы сравниваете с == 0 (что на самом деле было бы true вместо желаемого false).

2. Первое условие нечетное. Скидка всегда будет равна 0, потому что именно так вы ее инициализировали. Второй сравнивает тип TOUR с 0, а тип tour является строкой. Это означает, что Tour Type !== 0 всегда будет иметь значение true как !== сравнивает значение без принуждения к типу.

3. @Cosu tourType — это переменная, которая содержит значение, являющееся целым числом, поэтому я пытаюсь сравнить это значение с 0. Я делаю это неправильно и есть ли другой способ сделать это?

4. единственное место, где вы устанавливаете Tour Type , находится здесь tourType = document.getElementById("ans" i); . Это означает, что он содержит элемент dom, а не число или строку. Поскольку ваш первый цикл for не имеет условия прерывания, он tourType всегда будет последним элементом в цикле for, соответствующим элементу с id ans3 . Сначала я бы выяснил, какой вариант был выбран. Первый цикл for — хорошее начало, но вам нужно добавить оператор break, когда вы найдете проверенный радиоприемник. Сделайте то же самое для даты оплаты. Как только вы убедитесь, что у вас есть тур и дата выплаты, извлеките значения

5. ЧТОБЫ ответить на вопрос о том, как структурировать if оператор, нам не нужно пятьдесят строк вашего кода. Пожалуйста, замените его реальным простым примером.

Ответ №1:

если A имеет значение true, а B — нет, то отображается error_message_1

если значение B равно true, а значение A — нет, отображается error_message_2

если оба значения A и B неверны, отображается ошибка_мессаге_3

Лучше всего писать с последним условием в первую очередь:

 if (!A amp;amp; !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);
}

1. Может быть, лучше всего сначала написать последнее условие , но почему?

2. @torazaburo Это самоочевидно, если подумать об этом на минуту. 🙂 Иногда нужно оставить достаточно большой пробел, чтобы побудить OP подумать об этом и перепрыгнуть через него на своих собственных условиях. (Я даже включил комментарии в код в качестве поручня здесь)

Ответ №2:

Условия, которые вы задали, следующие :

если A имеет значение true, а B — нет, то отображается error_message_1

если значение B равно true, а значение A — нет, отображается error_message_2

если оба значения A и B неверны, отображается ошибка_мессаге_3

Чтобы проверить, верно ли что-то, вам нужно проверить, равно ли оно единице, а не нулю.

 <!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 amp;amp; 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 amp;amp; 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 amp;amp; 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. я пытался использовать if (button.selected) , но поскольку у каждой переключающей кнопки свой идентификатор, это было слишком долго, и я не знал, как сгруппировать их в одну переменную, которую я могу использовать.