javascript - 从同一个 onclick 失败调用两个函数

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>

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

“您应该将 javascript 放在主体的末尾(就在 之前)，或者将其包装在函数监听加载或 DOMContentLoaded 事件中(例如使用 addEventListener)。如果不是，则在加载元素之前执行 document.getElementById到 DOM，所以它返回 null。 – ”在这篇文章中 change background color of div .

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

有人可以帮帮我吗？

提前感谢您的帮助!

Answer 1

根据 this StackOverflow answer，您可以将代码包装在加载函数中，但一般共识似乎建议将脚本放在 body 标记的末尾和 YUI team .这完成了与包装代码相同的事情，并且如果它与 DOM 依赖项相关，则可能会解决您的问题。

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