CODEWITHSUNDEEP
javascriptevents
user5175034
user5175034

Reputation:

Conflicting Functions

The nice people here recently helped me with some JavaScript which is posted below. However, it appears to be conflicting with another function that already exists on the site. Since I am a back-end programmer and know little of JavaScript, does anyone know how to resolve the conflict?

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;
}

The code above is conflicting with the following, which is a reload icon for a CAPTCHA. There are no errors but the refresh does not do anything as long as the other code is there. Note that the code above is included site-wide and used on several other pages while the code below is used on only one of them.

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

Upvotes: 2

Views: 167

Answers (2)

Laurianti
Laurianti

Reputation: 975

You can use same logic for all events:

//function that already exists
window.onload = function () {
    console.log("A");
}

//method to add multiple functions at "event" on a element (windows is default)
var addOn = function (event, func, element) {
    if (!element) {
        element = window;
    }

    if (element.addEventListener) {
        element.addEventListener(event, func);
    }
    else if (element.attachEvent) {
        element.attachEvent('on' + event, func);
    }
    else {
        var onevent = element['on' + event];

        element['on' + event] = function () {
            if (onevent) {
                onevent();
            }

            func();
        }
    }
}

//closure
var addOnLoad = function (func, element) {
    addOn('load', func, element);
}

//adding more new functions at onload
addOnLoad(function () {
    console.log("B");
});

addOnLoad(function () {
    console.log("C");
});

<!DOCTYPE html>
<html>
<body>
    <img src="http://www.web1marketing.com/resources/tools/quickcaptcha/imagebuilder.php" border="1" id="verification" />

    <br />

    <a href="#" onclick="document.getElementById('verification').src = 'http://www.web1marketing.com/resources/tools/quickcaptcha/imagebuilder.php?img=' + Math.random(); ">
        <img src="http://kinneygroup.com/wp-content/themes/Kinney-new/images/loading_arrows.gif" width="22" height="22" border="0" title="Refresh Security Code" />
    </a>


    <div class="hide" style="display: none;">element hidden</div>

    <script>
        //method to add multiple functions at "event" on a element (windows is default)
        var addOn = function (event, func, element) {
            if (!element) {
                element = window;
            }

            if (element.addEventListener) {
                element.addEventListener(event, func);
            }
            else if (element.attachEvent) {
                element.attachEvent('on' + event, func);
            }
            else {
                var onevent = element['on' + event];

                element['on' + event] = function () {
                    if (onevent) {
                        onevent();
                    }

                    func();
                }
            }
        }

        //closure
        var addOnLoad = function (func, element) {
            addOn('load', func, element);
        }

        //closure
        var addOnClick = function (func, element) {
            addOn('click', func, element);
        }


        function showhide(obj, divs) {
            var showFlag = true;

            if (obj.style.display === 'block') {
                showFlag = false;
            }
            for (let i = 0, max = divs.length; i < max; i++) {
                divs[i].style.display = 'none';
            }

            if (showFlag) {
                obj.style.display = 'block';
            }
        }

        addOnLoad(function () {
            var d = document;
            var anchors = d.getElementsByTagName("a");
            var divs = d.getElementsByClassName("hide");

            for (let i = 0, len = anchors.length; i < len; i++) {
                addOnClick(function () {
                    let e = divs[i];
                    showhide(e, divs);
                }, anchors[i]);
            }
        });
    </script>
</body>
</html>

Upvotes: 0

blex
blex

Reputation: 25648

When you setup event listeners with that syntax (.on{event} = ...), you are overwriting any previously set listener for that event. For example:

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

Instead, you should add an event listener, without impacting others:

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

Upvotes: 6

Related Questions