JavaScript 函数在某个 if 语句后停止答案

【问题标题】：JavaScript functions stops after a certain if statementJavaScript 函数在某个 if 语句后停止
【发布时间】：2014-01-22 13:20:44
【问题描述】：

我最近尝试重新使用（工作！）javascript 函数并检测到一个奇怪的行为：在 for 循环中的某个 if 语句之后，函数停止。我看不出有什么原因。

如果将实际 if 条件更改为“1==1”，则一切正常。但是使用上面的代码，我得到了第一个警报（'我们开始'），但我从来没有得到第二个警报。因此，问题不能与循环联系起来（无穷无尽或类似的东西）。但除此之外，我完全感到困惑和无助。（使用 Firefox 26 和 Internet Explorer 11 测试）

<!DOCTYPE html SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script type="text/javascript">
          function my_function(number_of_divs)
           {
             for (var k = 0; k <= number_of_divs; k++)
               {
                var index = k;
                if (document.getElementsByName("text_levels")[index].style.display == 'block')
                 {
                  alert('Here we go');
                 } 
               }
              alert('This is never shown');
           }
         </script>
    </head>

    <body>
        <a href="javascript:void" onclick="my_function(1)">Click</a>
        <div name="text_levels" style="display:block">The content of a div element</div>
    </body>
</html>

【问题讨论】：

不应该是'==='吗？
您是否尝试过使用诸如 firebug 之类的调试器进行单步调试？

标签： javascript if-statement for-loop

【解决方案1】：

问题是您只有一个具有特定名称的元素，并且数组索引从零开始，因此您在小于条件处停止。

for (var k = 0; k < number_of_divs; k++)

因为当它尝试使用index=1 调用时，下面的语句会抛出错误：

document.getElementsByName("text_levels")[index].style.display == 'block'

Here is working Demo

【讨论】：

【解决方案2】：

错误控制台告诉你问题所在：

Uncaught TypeError: Cannot read property 'style' of undefined

您需要在 if 语句中执行边界检查：

var index = k, 
    levels = document.getElementsByName("text_levels"),
    levelLength = levels.length;

    if(index < levels.length && levels[index].style.display == 'block')
    {
        alert('Here we go');
    }

【讨论】：

【解决方案3】：

正是因为这条线

k <= number_of_divs

应该是的

k < number_of_divs

由于只有一个text_levels，它将让循环访问第二个元素（索引1 处的元素），它不存在。因此，它失败并出现错误。

【讨论】：