Javascript 如果相互缠绕的语句不起作用

我有一个小问题，涉及if语句

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;
                                        }
                                    }
                                }
                    }

                }
              }
            }
        }

在那个例子中，我检查textfield中的数字是1，还是2、3或4…，如果是3，例如它应该做它在1、2和3中所做的一切。这是可行的，但如果我在那里输入5，它会说“数字太高了”，但只有当数字超过40时才会发生。 顺便说一句，我有它所需要的一切，就像这样：

<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>

您正在比较字符串

“5”

实际上是

“41”

，因为当您比较字符串时，您是按字典进行比较的。这是一个逐字处理的过程，一旦发现不匹配的字母就会停止。由于

“5”

是

“4”
，
“5”
大于任何以
“4”
开头的字符串

解析来自用户的数字，并在
if
语句中键入数字，而不是字符串。
您正在比较字符串
“5”
实际上是
“41”
，因为当您比较字符串时，您是按字典进行比较的。这是一个逐字处理的过程，一旦发现不匹配的字母就会停止。由于
“5”
是
“4”
，
“5”
大于任何以
“4”
开头的字符串

解析来自用户的数字，并在
if
语句中以数字而不是字符串的形式键入数字。
当您键入
5
并显示数字太高时，这很好地表明您正在进行字符串比较（因为您正在将其与
41
进行比较）。您必须首先将其转换为整数，即：

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

通过在前面添加一个
+
，可以将其类型强制为
Number
。此外，不需要执行过多的if/else嵌套。如果要将每个数字应用于其前面的所有选择器（例如，
3
将取消隐藏1、2和3），可以使用以下逻辑：

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;
    }
}

函数voegelfeld（）{
var va=document.getElementById（“voegel”）.value；
//最大截止值为41
如果（va>=“41”）{
警报（“数字过高”）；
返回；
}
document.getElementById（“CB”）.hidden=true；
document.getElementById（“CRB”）.hidden=false；
//循环遍历之前的所有数字
对于（var i=1；i当您键入
5
并且它显示数字太高时，这很好地表明您正在进行字符串比较（因为您正在将其与
41
进行比较）。您必须首先将其转换为整数，即：

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

通过在前面添加一个
+
，可以将其类型强制为
数字
。此外，不需要执行过多的if/else嵌套。如果希望每个数字应用于它前面的所有选择器（例如
3
将取消隐藏1、2和3），则可以使用以下逻辑：

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;
    }
}

函数voegelfeld（）{
var va=document.getElementById（“voegel”）.value；
//最大截止值为41
如果（va>=“41”）{
警报（“数字过高”）；
返回；
}
document.getElementById（“CB”）.hidden=true；
document.getElementById（“CRB”）.hidden=false；
//循环遍历之前的所有数字
对于（var i=1；i不要比较字符串和数字，请确保您正在比较的内容具有相同的类型，否则您会遇到各种不总是清楚的问题

您可以使用
parseInt
从字符串输入中获取整数，并使用代码中的整数进行比较：

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

不要比较字符串和数字，确保你要比较的东西具有相同的类型，否则你会受到各种不总是清楚的影响

您可以使用
parseInt
从字符串输入中获取整数，并使用代码中的整数进行比较：

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

我强烈建议查看switch语句我强烈建议查看switch语句