2

太好了，我遇到了 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'
    }

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

为什么是这样？？

4

4 回答 4

7

因为您正在覆盖第一个函数。不要像那样设置属性......使用addEventListener或等效的代替：

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

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

目前，您只是设置属性的值。考虑以下代码，它实际上是等效的：

var obj = {};
obj.x = 10;
obj.x = 20;
console.log(obj.x); // 20
于 2013-03-31T15:20:58.817 回答
3

您正在替换该onload功能。

正确的解决方案是使用添加事件侦听器addEventListener，它们是相加的：

window.addEventListener('load', function1);
window.addEventListener('load', function2);
于 2013-03-31T15:20:57.903 回答
1

无需替换您的 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';
}

祝你好运！

于 2013-03-31T15:23:48.553 回答
0

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

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

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

您也可以执行其他答案的操作。这似乎也不错。

于 2013-03-31T15:22:16.647 回答