Javascript file just working in Google Chrome

Question

I'm having some trouble with a javascript file, it just works on google chrome. That's my JS file, it changes the color of some DOM elements in another file called index.js. It works perfectly in Google Chrome, but in Firefox, OperaBrowser, or even in mobile browsers, it just doesn't work. Is there any changes I have to do to make it work on different browsers?

$( document ).ready(function(){

    alert('file loaded');
    // $("#bOutline1").hide();

    // $(".colorpicker").asColorPicker();
    // $(".complex-colorpicker").asColorPicker({
    //     mode: 'complex'
    // });

    var inputBarraTitulos;
    var inputMenuLateral;
    var inputCoresTextosBarraTitulos;
    var inputCoresTextosMenuLateral;
    var inputCorMenuSuperior;

    var defaultColor = "#7460ee";


    window.addEventListener("load", startCoresBarraTitulos, false);
    window.addEventListener("load", startCoresMenuLateral, false);
    // window.addEventListener("load", startCoresTextosBarraTitulos, false);
    window.addEventListener("load", startCoresTextosMenuLateral, false);
    window.addEventListener("load", startInputCorTopBar, false);

    function startCoresBarraTitulos() {
        alert('startbarratitulo');
        //cor das barras de titulo
        inputBarraTitulos = document.querySelector("#inputBarraTitulos");
        inputBarraTitulos.value = defaultColor;
        inputBarraTitulos.addEventListener("input", trocaCorBarraTitulos, false);
        inputBarraTitulos.select();

    }

    function startCoresMenuLateral() {

        //cor do menu lateral
        inputMenuLateral = document.querySelector("#inputMenuLateral");
        inputMenuLateral.value = defaultColor;
        inputMenuLateral.addEventListener("input", trocaCorMenuLateral, false);
        inputMenuLateral.select();
    }

    // function startCoresTextosBarraTitulos() {

    //     //cor do menu lateral
    //     inputCoresTextosBarraTitulos = document.querySelector("#inputCoresTextosBarraTitulos")
    //     inputCoresTextosBarraTitulos.value = defaultColor
    //     inputCoresTextosBarraTitulos.addEventListener("input", trocaCorTextosBarraTitulo, false)
    //     inputCoresTextosBarraTitulos.select()
    // }

    function startCoresTextosMenuLateral() {

        //cor do menu lateral
        inputCoresTextosMenuLateral = document.querySelector("#inputCoresTextosMenuLateral");
        inputCoresTextosMenuLateral.value = defaultColor;
        inputCoresTextosMenuLateral.addEventListener("input", trocaCorTextosMenuLateral, false);
        inputCoresTextosMenuLateral.select();
    }

    function startInputCorTopBar() {      

        inputCorMenuSuperior = document.getElementById("inputCorMenuSuperior");
        inputCorMenuSuperior.value = defaultColor;
        inputCorMenuSuperior.addEventListener("input", trocaCorTopBar, false);
        inputCorMenuSuperior.select();
    }

    // converter RGB em HEX
    function rgbToHex(total) {
        var total = total.toString().split(',');
        var r = total[0].substring(4);
        var g = total[1].substring(1);
        var b = total[2].substring(1,total[2].length-1);
        return ("#"+checkNumber((r*1).toString(16))+checkNumber((g*1).toString(16))+checkNumber((b*1).toString(16))).toUpperCase();
    }
    function checkNumber(i){
        i = i.toString();
        if (i.length == 1) return '0'+i;
        else return i;
    }




    function trocaCorBarraTitulos(event) {

        const barraTitulos = document.getElementById("cTitulo");
        const tituloSelecaoCores = document.getElementById("tituloSelecaoCores");
        const FotoPerfil = document.getElementById("FotoPerfil");
        const flexNoBlock = document.getElementById("FlexNoBlock");

        tituloSelecaoCores.style.backgroundColor = event.target.value;
        FotoPerfil.style.backgroundColor = event.target.value;
        barraTitulos.style.backgroundColor = event.target.value;
        flexNoBlock.style.backgroundColor = event.target.value;

        const corBarraTitulos = tituloSelecaoCores.style.backgroundColor; //recebe a cor geral das barras de titulo

        document.getElementById("RecebeCorBarraTitulos").value = rgbToHex(corBarraTitulos);
        const RecebeCorBarraTitulos = document.getElementById("RecebeCorBarraTitulos").value;
        console.log(RecebeCorBarraTitulos);

        $.ajax({
            url:'cor_enviar.php',
            type:'POST',
            data: {RecebeCorBarraTitulos: RecebeCorBarraTitulos}, 
            success:function(data){
                $("#bOutline1").show();
                alert(data);
            },
            error: function(data){
                alert("erro");
            }
        });

    }



    function trocaCorMenuLateral(event){
        const leftSidebar = document.getElementById("leftSidebar");

        const corMenuLateral = leftSidebar.style.backgroundColor;
        leftSidebar.style.backgroundColor = event.target.value;

        document.getElementById("RecebeCorMenuLateralFundo").value = rgbToHex(corMenuLateral);
        const RecebeCorMenuLateralFundo = document.getElementById("RecebeCorMenuLateralFundo").value;
        console.log(leftSidebar.style.backgroundColor);

        $.ajax({
            url:'cor_enviar.php',
            type:'POST',
            data: {RecebeCorMenuLateralFundo: RecebeCorMenuLateralFundo}, 
            success:function(data){
                $("#bOutline1").show();
                alert(data);
            },
            error: function(data){
                alert("erro");
            }
        });

    }

    function trocaCorTopBar(event){

        const topBar = document.getElementById("topbar");

        topBar.style.backgroundColor = event.target.value;
        const corTopBar = topBar.style.backgroundColor;

        document.getElementById("RecebeCorTopBar").value = rgbToHex(corTopBar);
        const RecebeCorTopBar = document.getElementById("RecebeCorTopBar").value;
        console.log(RecebeCorTopBar);

        $.ajax({
            url:'cor_enviar.php',
            type:'POST',
            data: {RecebeCorTopBar: RecebeCorTopBar}, 
            success:function(data){
                $("#bOutline1").show();
                alert(data);
            },
            error: function(data){
                alert("erro");
            }
        });

    }

    function trocaCorTextosMenuLateral(event){
        const textoLeftSidebar = document.getElementById("textColor");
        const corTextoMenuLateral = textoLeftSidebar.style.color;

        textoLeftSidebar.style.color = event.target.value;

        document.getElementById("RecebeCorTextoMenuLateral").value = rgbToHex(corTextoMenuLateral);
        const RecebeCorTextoMenuLateral = document.getElementById("RecebeCorTextoMenuLateral").value;
        console.log(RecebeCorTextoMenuLateral);

        $.ajax({
            url: 'cor_enviar.php',
            type: 'POST',
            data: {RecebeCorTextoMenuLateral: RecebeCorTextoMenuLateral},
            success: function(data){
                $("#Outline1").show();
                alert(data);
            },
            error: function(data){
                alert("erro");
            }
        })

    }

});

Answer 1

You're setting load event listeners on the window inside your $(document).ready() function.

This is non-deterministic and unreliable. At the time you set these listeners, the load event may have already fired.

This could easily vary from browser to browser or other factors.

Move the window.addEventListener("load",...) calls outside the $(document).ready().

There may be other problems in the code, but I'm out of time for the moment and just wanted to let you know about this one problem.