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

调用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>

这两个脚本都位于 header 中引用的单独的.js文件中，我知道这可能是第二个脚本的问题，因为有人提到:

“您应该将javascript放在主体的末尾(恰好在之前)，或将其包装在函数侦听负载或DOMContentLoaded事件中(例如，使用addEventListener)。如果没有，则在将元素加载到DOM之前执行document.getElementById ，因此它返回null。–“在这篇文章change background color of div中。

但是我不知道如何“将其包装在函数侦听负载或DOMContentLoaded事件中”。

有人可以帮帮我吗？

提前谢谢你的帮助!

最佳答案

您可以将代码包装在on load函数中，但是根据this StackOverflow answer和YUI team，通常的共识似乎是建议将脚本放在body标签的末尾。这可以完成与包装代码相同的操作，并且如果与DOM依赖关系相关，则可能会解决您的问题。

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

关于javascript - 从相同的onclick失败中调用两个函数，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31620351/