Как сделать выполнение кода на js?

Question

[arti_djeims]

Сделал код который меняет цвет заднего фона на сайте ( при клике по объекту).

<div  onClick="KlickMoon()" class="moon"><img width="65px" src="https://cdn1.iconfinder.com/data/icons/hawcons/32/700440-icon-28-moon-128.png"></div>
function KlickMoon() {
 document.body.style.background = 'rgb(23, 23, 23)';
}

Когда человек кликает он получает темный задний фон, так вот как сделать что бы если он кликнул 2 раз то обратно вернулся белый?

Answer 1

[Сергей Наломенко]

Если по простому, с использованием глобальной переменной, то как-то так:

var dark = false;

function KlickMoon() {
 document.body.style.background = dark ? 'rgb(255, 255, 255)' : 'rgb(23, 23, 23)';
 dark = !dark;
}

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

var colors = [
				'rgb(22, 22, 22)',
				'rgb(88, 88, 88)',
				'rgb(200, 200, 200)',
				'rgb(255, 255, 255)'
				];
var color_index = 0;

function KlickMoon() {
 document.body.style.background = colors[color_index++];
 if(color_index == colors.length) 
 	color_index = 0;
}

Comments

[arti_djeims]

а если захочу еще и 3 цвет добавить например?

[Сергей Наломенко]

arti_djeims: Дополнил ответ

Answer 2

[ummahusla]

$(document).ready(function() {
    $('.moon').click(function(e) {  
      document.body.style.background = 'rgb(23, 23, 23)';
    });
});

Answer 3

[Денис Инешин]

Вам нужна toggle функция. Примерно так:

var colored = false;

function toggleBgColor () {
    if (colored) {
        document.body.style.background = 'rgb(255, 255, 255)';
        colored = false;
    } else {
        document.body.style.background = 'rgb(23, 23, 23)';
        colored = true;
    }
}

Answer 4

[AngelZeruel]

Можно сделать решение на основе стиля: в одном случае у нас есть стиль black (для темного фона), в другом случае его нет (светлый фон). Далее делаем следующее:

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

    if (body.classList.contains("black") == true) {
        body.classList.remove("black");
    } else {
        body.classList.add("black");
    }
}