Javascript函数顺序

我有个JS问题。我对web开发相当陌生，所以我不完全确定我的JS有什么问题

//create script for #mainHeading focus @ pageload -- heading 1
    window.onload = function() {
        var mainHeading = document.getElementById("mainHeading");
        mainHeading.style.textShadow = '0px 0px 0px #fff'
    }

//create script for #subHeading focus @ pageload -- heading 2
    window.onload = function() {
        var subHeading = document.getElementById("subHeading");
        subHeading.style.textShadow = '0px 0px 0px #fff'
    }

因此，基本上，当页面加载时，我为我的第一个标题“focus”编写了函数。然后，我决定添加具有相同功能的第二个标题。现在，当我加载页面时，只加载第二个标题，而不是两个标题

---

这是为什么？？？

您正在替换

onload

功能

正确的解决方案是使用

addEventListener

添加事件侦听器，它们是可添加的：

window.addEventListener('load', function1);
window.addEventListener('load', function2);

---

因为您正在覆盖第一个函数。不要这样设置属性。。。改用

addEventListener

或等效工具：

window.addEventListener("load", function () {
    // First event handler
});
window.addEventListener("load", function () {
    // Second event handler
});

此方法允许您根据需要注册尽可能多的事件处理程序。请注意，非常旧的Internet Explorer版本不支持它，因此您可能需要检测它，并在那些旧的IE版本中使用

attachEvent

目前，您只需设置属性的值。考虑下面的代码，这是等效的：

var obj = {};
obj.x = 10;
obj.x = 20;
console.log(obj.x); // 20

---

您正在覆盖第二个的方法。您需要将它们合并在一起：

window.onload = function() {
    var mainHeading = document.getElementById("mainHeading"),
        subHeading = document.getElementById("subHeading");

    mainHeading.style.textShadow = subHeading.style.textShadow = 
                                                  '0px 0px 0px #fff';
};

---

你也可以像其他答案那样做。这看起来也不错。

不需要替换onload函数，只需添加指令即可。尼斯老派，因此跨浏览器兼容：

window.onload = function() {
    var mainHeading = document.getElementById("mainHeading"),
         subHeading = document.getElementById("subHeading");
    mainHeading.style.textShadow = '0px 0px 0px #fff';
    subHeading.style.textShadow = '0px 0px 0px #fff';
}

祝你好运