Question

我最近尝试重新使用（工作！）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>

Answer 1

问题是你只有一个具有特定名称的元素，并且数组索引从零开始，因此你会在低于条件的情况下停止。

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

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

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

Here is working Demo

Answer 2

正是因为这条线

k <= number_of_divs

应该是

k < number_of_divs

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

Answer 3

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

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

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

3 个答案: