Как решить конфликт 2-х скриптов?

Question

[Alex_87]

Здравствуйте! У меня 2 подключаемых js-файлов с моим кодом. Они между собой каким-то образом конфликтуют. Взависимости от расположения какой-то скрипт работает, а какой-то нет. Подозреваю что дело в windows.onload... которая присутствует в каждом из скриптов. Почему думаю так? Потому что в одном из файлов присутствую ещё 2 скрипта, но у них нет window.onload и они работают.

<script src="js/newscript.js"></script>
        <script src="js/scripts.js"></script>

window.onload= function() {
        document.getElementById('toggler').onclick = function() {
        openbox('box', this);
        return false;
           };
        };
    function openbox(id, toggler) {
        var div = document.getElementById(id);
        if(div.style.display == 'block') {
        div.style.display = 'none';
        toggler.innerHTML = 'Открыть';
     }else {
       div.style.display = 'block';
       toggler.innerHTML = 'Закрыть';
           }
        }

window.onload = function(){
    var p = new Popup({
        modal: '.modal',
        overlay: '.overlay'
    });

    function Popup(options){
    this.modal = document.querySelector(options.modal);
    this.overlay = document.querySelector(options.overlay);

    var popup = this;

    this.open = function(content){
        popup.modal.innerHTML = content;
        popup.modal.classList.add('open');
        popup.overlay.classList.add('open');
    }
    this.close = function(){
        popup.overlay.classList.remove('open');
        popup.modal.classList.remove('open');
    }
    this.overlay.onclick = popup.close;
}
    document.querySelector('.for').onclick = function(){
    var form = document.querySelector('.popup_contact');
    p.open(form.innerHTML);  
   };  
};

Answer 1

[Maks_ Semenduk;]

Способ навесить действие через "on..." не важно "onclick" это или "onload" постоянно переписывается, лучше пользоваться addEventListener, которые можно добавлять сколько угодно и все они будут работать вместе, а от onclick и onload совсем отказаться. Вот пример:

window.addEventListener("load",()=>{
    //код
});

И да, если добавлять вызов скриптов в самый конец HTML-документа, то все элементы спокойно будут кверится без всяких использований эвентов(видимо с чем у вас и возникла проблема, когда вы решили воспользоваться onload).

Comments

[Аня Иванова]

спасибо, очень помог

Answer 2

[Andy Developer]

window.addEventListener("load", function1);
window.addEventListener("load", function2);

Answer 3

[Frimko]

перепиши за место window.onload
на
window.addEventListener("onload", function(){})

Comments

[Alex_87]

Сделал как написали! Странно, но не сработало.... Сработало тогда, когда я в одном скрипте вообще убрал window.onload ...