Simple JavaScript if-else statement not working

Question

I'm really new to coding, and recently started learning JavaScript.

I'm trying to get my head around if-else statements, and tried to put together an extremely basic budgeting function that subtracts budget from cost. It's only showing the else result though, and doesn't seem to care what I put in the inputs.

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>

Sorry for the dumb question. Thanks for all your help :)

You read the values when the page loads. The values do not keep updating.... — epascarello
– epascarello, Commented Dec 16, 2020 at 21:13

oguzhancerit · Accepted Answer · 2020-12-16 21:20:41Z

4

I think the only problem here is that you need to get the values inside the function, not outside

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>

edited Dec 16, 2020 at 21:20

oguzhancerit

1,5831 gold badge18 silver badges29 bronze badges

answered Dec 16, 2020 at 21:13

Looper

915 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

nope Over a year ago

It worked! Thanks so much. Can I ask why it's important that the values are placed inside the function? I thought that variables were applicable to functions even if created outside of them. Again, thanks!

Randal Andrade Nunes Over a year ago

@nope It is important because you want to get the value at the time the function runs. If they are outside, the value is whatever it is when the page was built in the browser.

Collectives™ on Stack Overflow

Simple JavaScript if-else statement not working

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related