Witajcie,
Potrzebuję zrobić następującą funkcjonalność:
- na stronie jest link, po kliknięciu którego będzie dodawana do body klasa hightcontrast - i po ponownym kliknięciu będzie ona usuwana.

Dotychczas zrobiłem taki kod:

[PHP] pobierz, plaintext 
 
<a href="#"  title="Zmień kontrast" class="float-right m-0 pr-2 contrast">
            <img src="assets/images/ikon1.png" class="img-responsive contrast" alt="Zmień kontrast">
</a>
 
 
$(document).ready(function($) {
    if (localStorage.getItem("contrast") === null) {
        localStorage.setItem("contrast", '1');
    }
 
    if (typeof(Storage) !== "undefined") {
        // checkContrast();
 
        function checkContrast() {
            let oldContrast = localStorage.getItem("contrast");
            alert(oldContrast);
            updateViewContrast(oldContrast);
        }
 
        $(".contrast").click(function() {
            checkContrast();
        });
 
        function updateViewContrast(contrastVersion) {
            if (contrastVersion === '1') { // normalny
                $("body").removeClass('highcontrast');
                localStorage.setItem("contrast", '2');
            } else {
                $("body").addClass('highcontrast');
                localStorage.setItem("contrast", '1');
            }
        }
    }
});
 
[PHP] pobierz, plaintext 

Po każdym kliknięciu wyświetlam alert z 1 lub 2 aby zobaczyć czy działa.

Problem w tym że po kliknięciu w linka widzę 2 alert (jeden po drugim): 1, 2.

Klasa highcontrast po pierwszym kliknięciu jest widoczna cały czas.

Jak to naprawić?


Bardzo proszę o pomoc