冲突的功能

Question

最近这里的好人帮我提供了一些JavaScript,下面发布了这些JavaScript.但是,它似乎与网站上已存在的另一个功能相冲突.由于我是一名后端程序员并且对JavaScript知之甚少,有没有人知道如何解决冲突？

function showhide(id) {
    if (document.getElementById) {
        var divid = document.getElementById(id);
        var divs = document.getElementsByClassName('hide');
        var showElement = true;
        if (divid.style.display === 'block') {
            showElement = false;
        }
        for (var i = 0; i < divs.length; i++) {
            divs[i].style.display = 'none';
        }
        if (showElement) {
            divid.style.display = 'block';
        }
    }
    return false;
}

上面的代码与以下内容冲突,后者是CAPTCHA的重新加载图标.没有错误,但只要其他代码存在,刷新就不会执行任何操作.请注意,上面的代码包含在站点范围内,并在其他几个页面上使用,而下面的代码仅用于其中一个页面.

<img src="/common/quickcaptcha/imagebuilder.php" border="1" id="verification">
<a href="#" onclick="document.getElementById('verification').src='/common/quickcaptcha/imagebuilder.php?img=' + Math.random(); return false">
  <img src="/common/images/refreshicon.gif" width="22" height="22" border="0" title="Refresh Security Code">
</a>

Answer 1

当您使用该语法(.on{event} = ...)设置事件侦听器时,您将覆盖该事件的任何先前设置的侦听器.例如:

window.onload = function(){ console.log("A"); }; // Won't be executed
window.onload = function(){ console.log("B"); };

相反,您应该添加一个事件监听器,而不会影响其他人:

// Both of these will be executed
window.addEventListener('load', function(){ console.log("A"); });
window.addEventListener('load', function(){ console.log("B"); });