CODEWITHSUNDEEP
javascripthtmlif-statement
Officiel Freaks
Officiel Freaks

Reputation: 71

If Statements wrapped around of each other dont work

I have a little problem, that involves if statements.

function voegelfelder(){
            var va = document.getElementById("voegel").value;
            if(va >= "41"){
                alert("Number too high"); 
            }
            else{
                document.getElementById("CB").hidden = true;
                document.getElementById("CRB").hidden = false;
                if(va >= "1"){ 

                    document.getElementById("v1x").hidden = false;
                    document.getElementById("v1y").hidden = false;
                    document.getElementById("v1r").hidden = false;
                        if(va >= "2") {

                            document.getElementById("v2x").hidden = false;
                            document.getElementById("v2y").hidden = false;
                            document.getElementById("v2r").hidden = false;

                            if(va >= "3") {
                                document.getElementById("v3x").hidden = false;
                                document.getElementById("v3y").hidden = false;
                                document.getElementById("v3r").hidden = false;

                                if(va >= "4") {
                                    document.getElementById("v4x").hidden = false;
                                    document.getElementById("v4y").hidden = false;
                                    document.getElementById("v4r").hidden = false;

                                    if(va >= "5") {
                                        document.getElementById("v5x").hidden = false;
                                        document.getElementById("v5y").hidden = false;
                                        document.getElementById("v5r").hidden = false;

                                        if(va >= "6") {
                                            document.getElementById("v6x").hidden = false;
                                            document.getElementById("v6y").hidden = false;
                                            document.getElementById("v6r").hidden = false;
                                        }
                                    }
                                }
                    }

                }
              }
            }
        }

In that example I was checking if the Number in the textfield was 1 or if it was 2 or 3 or 4..., and if it was 3 for Example it should do everything that it does in 1, 2 and 3. That worked but if i typed 5 in there it said "Number too high" but thaht should only happen if the number is more than 40. By the way I have everything that it needs like this:

<input type="text" placeholder="Vogel 1 X" id="v1x" hidden="hidden">
       <input type="text" placeholder="Vogel 1 Y" id="v1y" hidden="hidden">
       <input type="text" placeholder="Vogel 1 Richtung" id="v1r" hidden="hidden"><br>
       <input type="text" placeholder="Vogel 2 X" id="v2x" hidden="hidden">
       <input type="text" placeholder="Vogel 2 Y" id="v2y" hidden="hidden">
       <input type="text" placeholder="Vogel 2 Richtung" id="v2r" hidden="hidden"><br>
       <input type="text" placeholder="Vogel 3 X" id="v3x" hidden="hidden">
       <input type="text" placeholder="Vogel 3 Y" id="v3y" hidden="hidden">
       <input type="text" placeholder="Vogel 3 Richtung" id="v3r" hidden="hidden"><br>
       <input type="text" placeholder="Vogel 4 X" id="v4x" hidden="hidden">
       <input type="text" placeholder="Vogel 4 Y" id="v4y" hidden="hidden">
       <input type="text" placeholder="Vogel 4 Richtung" id="v4r" hidden="hidden"><br>
       <input type="text" placeholder="Vogel 5 X" id="v5x" hidden="hidden">
       <input type="text" placeholder="Vogel 5 Y" id="v5y" hidden="hidden">
       <input type="text" placeholder="Vogel 5 Richtung" id="v5r" hidden="hidden"><br>
       <input type="text" placeholder="Vogel 6 X" id="v6x" hidden="hidden">
       <input type="text" placeholder="Vogel 6 Y" id="v6y" hidden="hidden">
       <input type="text" placeholder="Vogel 6 Richtung" id="v6r" hidden="hidden"><br>
       <input type="text" placeholder="Vogel 7 X" id="v7x" hidden="hidden">
       <input type="text" placeholder="Vogel 7 Y" id="v7y" hidden="hidden">
       <input type="text" placeholder="Vogel 7 Richtung" id="v7r" hidden="hidden"><br>
       <input type="text" placeholder="Vogel 8 X" id="v8x" hidden="hidden">
       <input type="text" placeholder="Vogel 8 Y" id="v8y" hidden="hidden">
       <input type="text" placeholder="Vogel 8 Richtung" id="v8r" hidden="hidden"><br>

Upvotes: 0

Views: 63

Answers (3)

ppajer
ppajer

Reputation: 3145

Don't compare strings and numbers, make sure the things you're comparing have the same type otherwise you are subjected to various rules of conversion that aren't always clear.

You can use parseInt to get an integer from your string input, and use integers in your code to compare:

var va = parseInt(document.getElementById("voegel").value);
    if(va >= 41){ //notice how the "" is gone
       alert("Number too high"); 
    } else{
...

Upvotes: 1

Terry
Terry

Reputation: 66103

When you type in 5 and it says number too high, that is a good indication that you are doing a string comparison (since you are comparing it against 41). You have to convert it to an integer first, i.e.:

var va = +document.getElementById("voegel").value;

By adding a + at the front, you are coercing its type to Number. Also, there is no need to perform excessive if/else nesting. If you want each number to apply to all selectors preceeding it (e.g. 3 will unhide 1, 2, and 3), you can use the following logic:

function voegelfelder(){
    var va = document.getElementById("voegel").value;

    // Maximum cutoff at 41
    if(va >= "41"){
        alert("Number too high");
        return;
    }

    document.getElementById("CB").hidden = true;
    document.getElementById("CRB").hidden = false;

    // Iteratively loop through all numbers before
    for (var i = 1; i <= va; i++) {
        document.getElementById("v" + i + "x").hidden = false;
        document.getElementById("v" + i + "y").hidden = false;
        document.getElementById("v" + i + "r").hidden = false;
    }
}

Upvotes: 1

T.J. Crowder
T.J. Crowder

Reputation: 1074238

You're comparing strings. "5" is indeed > "41", because when you compare strings, you're doing it lexicographically. It's a letter-by-letter process that stops as soon as it finds letters that don't match. Since "5" is > "4", "5" is greater than any string starting with "4".

Parse the number from the user, and type the numbers in your if statements as numbers, not strings.

Upvotes: 3

Related Questions