0

Boa tarde,

Estou com este código ele usa o mesmo botão para da o contraste e voltar ao padrão porem preciso que quando clicar na bolinha preta ele fique escuro e quando clicar na bolinha branca volte a cor padrão, já tentei separar o código mais ele acaba dando conflito, alguém consegue me ajudar?

inserir a descrição da imagem aqui

(function () {
var Contrast = {
    storage: 'contrastState',
    cssClass: 'contrast',
    currentState: null,
    check: checkContrast,
    getState: getContrastState,
    setState: setContrastState,
    toogle: toogleContrast,
    updateView: updateViewContrast
};

window.toggleContrast = function () { Contrast.toogle(); };

Contrast.check();

function checkContrast() {
    this.updateView();
}

function getContrastState() {
    return localStorage.getItem(this.storage) === 'true';
}

function setContrastState(state) {
    localStorage.setItem(this.storage, '' + state);
    this.currentState = state;
    this.updateView();
}

function updateViewContrast() {
    var body = document.body;

    if (this.currentState === null)
        this.currentState = this.getState();

    if (this.currentState)
        body.classList.add(this.cssClass);
    else
        body.classList.remove(this.cssClass);
}

function toogleContrast() {
    this.setState(!this.currentState);
}

})();

1 Resposta 1

1

Fiz esse exemplo bem básicão que as vezes pode te ajudar. O código pode ser otimizado, mas coloquei o mais simples possível, até pq meu conhecimento tb não é muito avançado em JS.

Mas basicamente quando vc clica no btnGreen ou btnRed vc vai fazer um classList.add/.remove no elemento que vc quer trocar a cor.

inserir a descrição da imagem aqui

Pra entender melhor veja o código.

let btn = document.querySelector('.fa-adjust');
let btnGreen = document.querySelector('.fa-arrow-alt-circle-right.green');
let btnRed = document.querySelector('.fa-arrow-alt-circle-right.red');

btnGreen.addEventListener('click', verde);
btnRed.addEventListener('click', red);

function verde() {
    btn.classList.remove('red');
    btn.classList.add('green');
}
function red() {
    btn.classList.remove('green');
    btn.classList.add('red');
}
body {
    font-size: 50px;
}
.red {
    color: red;
}
.green {
    color: green;
} 
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />


<i class="fas fa-adjust red"></i>
<i class="fas fa-arrow-alt-circle-right green"></i>
<i class="fas fa-arrow-alt-circle-right red"></i>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .