JavaScript中for循环中嵌套if语句的正确语法

如何解决JavaScript中for循环中嵌套if语句的正确语法

请原谅我的愚蠢问题，但昨天我才开始自己学习Javascript和HTML。我正在尝试复制一种类型种族的游戏，由于其中包含if语句，因此似乎无法完成for循环。

请参阅以下内容：

    <script>
        var current = document.getElementById('currentWord');
        function inputMatch(){
            var input = document.getElementById('inputfield').value;
            if(input.length > current.innerHTML.length){
                current.className = "currently-wrong";
            }
            else{
                for (var i = 0; i < input.length; i++){
                    if(input[i] != current.innerHTMl[i]){
                        current.className = "currently-wrong";
                    };
                    else{
                        current.className = "currently-correct";
                    }
                };
            }
        }
    </script>

应该键入的单词被命名为 current

我正在获取名为 input

的变量中的用户输入

我想遍历输入以查看其是否与 current 相匹配。如果到目前为止匹配，我希望将类别更改为“当前正确”，否则，我希望将其更改为“当前错误”。

除了将警报（i）放入for循环外，我不知道调试的其他方式。

这样做时，没有输出。如果我删除else语句并保留alert（i），则唯一的输出是不同的“ 0”，这意味着i保持为0并且不会进行迭代。

如果我删除了if语句和else语句，则在输入时输入是正确的。

就是说，如果我输入

“ a”-> 0

“ p”-> 0，1

“ p”-> 0，1，2

“ l”-> 0,1,2,3

“ e”-> 0、1、2、3、4

这是预期的输出/警报，但是仅当我删除if语句时才有效。有任何调试建议吗？

解决方法

我建议您使用let和const而不是var来减少不必要的副作用。也不应该有一个;在if括号之后。

当if语句匹配时，意味着输入错误，则无需进一步检查（实际上，如果您仅在中间键入一个错误的字母，也将导致错误）。因此，只需使用break跳出循环；

const current = document.getElementById('currentWord');

function inputMatch(){
  const input = document.getElementById('inputfield').value;

  if(input.length > current.innerHTML.length){
    current.className = "currently-wrong";
  }
  else{
    for (var i = 0; i < input.length; i++){
      if(input[i] != current.innerHTML[i]) {
        current.className = "currently-wrong";
        break;
      }
      else {
        current.className = "currently-correct";
      }
    };
  }
}

.currently-wrong {
  background-color: red;
}
.currently-correct {
  background-color: green;
}

<div id="currentWord">apple</div>
<input id="inputfield" onkeyup="inputMatch()"/>

不过，您也可以像这样更漂亮地编写它：

const current = document.getElementById('currentWord');
const inputField = document.getElementById('inputfield');

const inputMatch = () => {
  const input = inputField.value;

  const matches = current.innerHTML.startsWith(input);
  current.className = matches ?  "currently-correct" : "currently-wrong";
}

.currently-wrong {
  background-color: red;
}
.currently-correct {
  background-color: green;
}

<div id="currentWord">apple</div>
<input id="inputfield" onkeyup="inputMatch()"/>