Question

调用2个单独运行良好的JS函数时遇到问题。我不熟悉JS：我从这里的一些帖子中获取了脚本并对其进行了调整，但我无法让它们协同工作。我的目标是在单击主文本中的相关链接时显示侧面板并更改该面板中框的颜色（并通过再次单击它来撤消它）。

这是我用来显示侧面板的功能：

function showRightPanel() {
    var elem = document.getElementById("right-panel");
    if (elem.classList) {
        console.log("classList supported");
        elem.classList.toggle("show");
    } else {
        var classes = elem.className;
        if (classes.indexOf("show") >= 0) {
            elem.className = classes.replace("show", "");
        } else {
            elem.className = classes + " show"; 
        }

        console.log(elem.className);
    }
}

这是改变颜色的功能：

var els = document.getElementsByClassName('change-color'),
target = document.getElementById('footnotes'),

changeColor = function() {
    target.style.backgroundColor = this.getAttribute('data-color');
};

for(var i=els.length-1; i>=0; --i) {
    els[i].onclick = changeColor;
}

这是调用两个函数的html：

<a href="#footnote1-chapter1" class="change-color" data-color="#E0FFC2"
onclick="showRightPanel();changeColor();"></a>

这是必须出现并改变颜色的方框：

<div id="footnotes"><p class="footnote" data-id="footnote1-chapter1">
</p></div>

两个脚本都在标题中引用的单独的.js文件中，我知道这可能是第二个脚本的问题，因为它被提到：

＆＃34;您应该将javascript放在正文的末尾（就在之前），或者将其包装在函数侦听加载或DOMContentLoaded事件中（例如使用addEventListener）。如果没有，则在将元素加载到DOM之前执行document.getElementById，因此它返回null。 - ＆＃34;在这篇文章中change background color of div。

但我不知道如何将它包装在函数侦听加载或DOMContentLoaded事件中＃34;。

有人可以帮帮我吗？

提前感谢您的帮助！

Answer 1

您可以将代码包装在on load函数中，但是根据this StackOverflow answer和YUI team，普遍的共识似乎建议将脚本放在body标记的末尾。这实现了与包装代码相同的功能，如果它与DOM依赖关系相关，可能会解决您的问题。

因此，我建议您将脚本放在body标记的末尾而不是head标记中，并查看是否有帮助。

Answer 2

正如Nathan所提到的，你的锚点的属性为on onclick="showRightPanel();changeColor();" 但是您的javascript会替换此属性，请参阅：els[i].onclick = changeColor; 因此只会调用changeColor函数。

<强> [更新]

在评论中，接受的答案是：

els[i].onclick = function(){showRightPanel();changeColor.apply(this);}

从相同的onclick失败调用两个函数

2 个答案: