只有“onload”形式的 JavaScript 函数有效？答案

【问题标题】：Only "onload" form of JavaScript function works?只有“onload”形式的 JavaScript 函数有效？
【发布时间】：2012-11-27 10:14:48
【问题描述】：

我有一个动态定位背景图像的 javascript 函数：

  window.onload = function() {
    bw = document.getElementsByClassName("BottomWrapper");
    if (bw.length===0){
      bw = document.getElementsByClassName("BottomWrapper2");
    }
    pos = window.innerWidth/2 - 490.5;
    bw=Array.prototype.slice.call(bw);
    bw[0].style.backgroundPosition="center 0px, " + pos + "px 0px";
  };

它有效。但是如果我命名相同的函数并运行它：

function position() {
  bw = document.getElementsByClassName("BottomWrapper");
  if (bw.length===0){
    bw = document.getElementsByClassName("BottomWrapper2");
  }
  pos = window.innerWidth/2 - 490.5;
  bw=Array.prototype.slice.call(bw);
  bw[0].style.backgroundPosition="center 0px, " + pos + "px 0px";
};
position();

我得到错误：

TypeError: Cannot read property 'style' of undefined

我很困惑。为什么第一个函数有效，第二个无效？

【问题讨论】：

你问window.onload做什么？
window.onload = position();
@SReject：差不多。删除()。
@Craig 通过删除“坏”函数并仅按名称使用“好”函数来简化问题；例如window.onload = position 与 position() 相比如何。提取position 的定义消除了“相同”函数的重复和“差异”的潜在来源。一旦完成，就可以安全地论证执行上下文才是最重要的，或者是否有其他问题。（另外，我建议使用局部变量来避免污染。）
糟糕。我的意思是，没有()'s

标签： javascript function typeerror

【解决方案1】：

如果 bw[0] 未定义，则意味着 document.getElementsByClassName("BottomWrapper2") 返回未定义，这很可能意味着运行脚本时 div 不在页面上。如果您在标记之后加载代码，则不应发生这种情况。

第一个工作的原因是因为它正在等待 onload 事件触发。

【讨论】：

好吧，我在页面加载后从 javascript 控制台运行了“position()”函数，得到了相同的结果。当我将它附加到 window.resize 事件时，该功能也可以工作。另外，我在有问题的 div 下方的页脚中有代码......所以我不认为这可能是问题。
@Craig 通过删除“坏”函数并仅按名称使用“好”函数来简化问题；例如window.onload = position 与 position() 相比如何。提取position 的定义消除了“相同”函数的重复和“差异”的潜在来源。一旦完成，就可以安全地论证执行上下文才是最重要的，或者是否有其他问题。（另外，我建议使用局部变量来避免污染。）
我的错...我在页脚中有代码，但事实证明我在头部包含的单独文件中也有相同的代码...抱歉误报并谢谢感谢您的所有回复！

【解决方案2】：

如果你使用这样的功能，它会工作

<html><head>
<script>

function position() {
  bw = document.getElementsByClassName("BottomWrapper");
  console.log(bw);
  if (bw.length===0){
    bw = document.getElementsByClassName("BottomWrapper2");
  }
  pos = window.innerWidth/2 - 490.5;
  bw=Array.prototype.slice.call(bw);
  bw[0].style.backgroundPosition="center 0px, " + pos + "px 0px";
  console.log(bw[0]);
};
   </script>
<body onload="position()">
<div class="BottomWrapper2"></div>
</body></head></html>

前面的会导致错误，因为函数是在加载主体之前调用的

【讨论】：

我的错...我在页脚中有代码，但事实证明我在头部包含的单独文件中也有相同的代码...抱歉误报并谢谢感谢您的所有回复！