У меня проблемы с файлом javascript, он работает только в Google chrome. Это мой JS файл, он меняет цвет некоторых элементов DOM в другом файле с именем index. js. Он отлично работает в Google Chrome, но в Firefox, OperaBrowser или даже в мобильных браузерах просто не работает. Есть ли какие-либо изменения, которые я должен сделать, чтобы он работал в разных браузерах?
$( 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");
}
})
}
});