Простая инструкция JavaScript if-else не работает

#javascript #if-statement #conditional-statements

#javascript #оператор if #условные операторы

Вопрос:

Я действительно новичок в программировании и недавно начал изучать JavaScript.

Я пытаюсь разобраться в операторах if-else и попытался собрать чрезвычайно простую функцию бюджетирования, которая вычитает бюджет из стоимости. Однако он показывает только результат else, и, похоже, его не волнует, что я ввожу во входные данные.

 let budget = parseFloat(document.getElementById("budget").value);
let cost = parseFloat(document.getElementById("cost").value);

function shoppingCalculator(){

    let x = budget - cost;

    if (x >=  0){
        alert("You are in budget!")
    } else {
        alert("You are not in budget!")
    }
}

 <html>

    <head>
        <title>
            JS for Dummies
        </title>
    </head>

    <body>
      
        <div>
            <form action="">
                <input type="number" id="budget" placeholder="Budget" style="width: 100px;">
                <br>
                <input type="number" id="cost" placeholder="Cost" style="width: 100px;">
                <br>
                <button type="button" onclick="shoppingCalculator()"></button>
            </form>
        </div>

    </body>

    <script src="jsnew.js"></script>
</html>

Развернуть фрагмент

Извините за глупый вопрос. Спасибо за всю вашу помощь 🙂

Ответ №1:

Я думаю, что единственная проблема здесь в том, что вам нужно получить значения внутри функции, а не снаружи

 function shoppingCalculator(){
    let budget = parseFloat(document.getElementById("budget").value);
    let cost = parseFloat(document.getElementById("cost").value);

    let x = budget - cost;

    if (x >=  0){
        alert("You are in budget!")
    } else {
        alert("You are not in budget!")
    }
}

 <html>

    <head>
        <title>
            JS for Dummies
        </title>
    </head>

    <body>
      
        <div>
            <form action="">
                <input type="number" id="budget" placeholder="Budget" style="width: 100px;">
                <br>
                <input type="number" id="cost" placeholder="Cost" style="width: 100px;">
                <br>
                <button type="button" onclick="shoppingCalculator()">Calculate</button>
            </form>
        </div>

    </body>

    <script src="jsnew.js"></script>
</html>

Развернуть фрагмент

1. Это сработало! Большое спасибо. Могу ли я спросить, почему важно, чтобы значения помещались внутри функции? Я думал, что переменные применимы к функциям, даже если они созданы вне их. Еще раз спасибо!

2. @нет, это важно, потому что вы хотите получить значение во время выполнения функции. Если они находятся снаружи, значение равно тому, что было, когда страница была создана в браузере.