Question

我有两个HTML文档，它们都在/ body标记之前链接了相同的.js脚本。在JS文档中，顶级IIFE链接到一个＆＃39; id＆＃39;在一个页面上，它工作正常，但当我转到第二页时，与这个＆＃39; id＆＃39;相关联的IIFE不会工作。但是，当我在JS doc上翻转IIFE的位置时，第二个（现在在顶部）工作而另一个没有...

//one
var loop = (function () {
  'use strict';
   var array = [5, 10, 15, 20],
    length = array.length,
    levelNumber = 0,
    tell = '',
    i;
  for (i = 0; i < length; i += 1) {
    levelNumber = (i + 1);
    tell += 'Level ' + levelNumber + ': ';
    tell += array[i] + '<br/>';
    document.getElementById('loop').innerHTML = tell;
    }
}());


 //two
   var multiple = (function () {
     'use strict';
      var level = 1,
      msg;

      switch (level) {
      case 1:
        msg = 'ONE!';
        break;
      case 2:
        msg = 'TWO!';
        break;
      }
      document.getElementById('test').innerHTML = msg;

  }());

Answer 1

如果该元素不存在于页面上，则document.getElementById('loop')将返回null，并且尝试执行null.innerHTML将会出错并停止您的脚本继续运行。（如果您在浏览器的控制台中查看，那么您应该会看到错误。）

尝试测试null（即测试元素是否存在），或许在每个函数的开头都是这样的：

var el = document.getElementById('loop');
if (!el) return;

在上下文中：

＆＃13;

var loop = (function () {
  'use strict';
   var el = document.getElementById('loop');
   if (!el) return;
   var array = [5, 10, 15, 20],
    length = array.length,
    levelNumber = 0,
    tell = '',
    i;
  for (i = 0; i < length; i += 1) {
    levelNumber = (i + 1);
    tell += 'Level ' + levelNumber + ': ';
    tell += array[i] + '<br/>';
    el.innerHTML = tell;
    }
}());

//two
var multiple = (function () {
     'use strict';
      var el = document.getElementById('test');
      if (!el) return;
      var level = 1,
      msg;

      switch (level) {
      case 1:
        msg = 'ONE!';
        break;
      case 2:
        msg = 'TWO!';
        break;
      }
      el.innerHTML = msg;

}());

＆＃13;

<p>For this demo, only the "test" element exists, but the second function should work because the first function checks for existence of "loop"...</p>
<div id="test"></div>

＆＃13;

或者您可以在您要分配值的位置进行测试：

var el = document.getElementById('test');
if (el) {
  el.innerHTML = msg;
}

...但是鉴于这些函数似乎没有任何意义，除了更新元素之外，如果元素不在那里就没有意义进行计算。

另外，您的loop和multiple变量最终都会得到值undefined，因为IIFE都不包含return语句。

JS不会申请第二个＆＃39; id＆＃39;如果第一个＆＃39; id＆＃39;在另一页上

1 个答案: