Смена цвета JavaScript не работает должным образом

Question

Я пытаюсь изменить цвет фона моего сайта с помощью нажатия кнопки, но он не работает должным образом.Что происходит, когда я нажимаю кнопку, он меняет цвет, а затем мгновенно возвращается к исходному цвету, он не хочет сохранять изменения.

$(document).ready(function(){
        $("button").click(function(){
            $("div").css("background", "grey");
        });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button> Change Theme</button>

Answer 1

Ванильная версия JS для этого будет:

<div id="div1" style="width: 200px; height:200px; "></div>
<button onclick="changeTheme()">Grey</button>
<script>
    function changeTheme() {
        document.getElementById('div1').style.background = "grey";
    }
</script>

Answer 2

$(document).ready(function(){
  $("button").click(function(){
    $("div").addClass("bgchange");
  });
});

добавить этот CSS также

.bgchange{background-color:grey}

Answer 3

Добавить return false в вашем нажатии кнопки.Кнопка вызывает PostBack (Форма сообщения).И тогда все изменения, внесенные в пользовательский интерфейс, будут потеряны.Вот почему он мигает серым на секунду, а затем снова меняется.Это означает, что страница завершила перезагрузку.Предполагается, что вы используете веб-формы или кнопка находится внутри form.

<script>
    $(document).ready(function () {
        $("button").click(function () {
            $("div").css("background", "grey");
            return false;
        });
    });
</script>