Клик для выбора фона на сайте

Question

Помогите пожалуйста! Это код для изменения фона при нажатии на кнопку. Мне нужно сделелать так, чтобы помимо этого, фон сохранялся после перезагрузки. А также задать этой кнопке текст. 3-ий день мучаюсь, помогите, я плохо разбираюсь в кодах!!

<script>
  var colorArray = ["#000", "#fff", "#eee"]; // массив с цветами
  var i = 0; // итератор

  function changeColor() {
    var currentColor = colorArray[i];
    document.body.style.background = currentColor;
    localStorage.setItem('backgroundColor', currentColor);
    i++;
    if (i > colorArray.length - 1) {
      i = 0;
    }
  }
</script>

<input type="button" onclick="javascript:changeColor();"/>

Answer 1

<button id="btn"> Изменить фон </button>

<script>
  // Достает ранее сохраненное значение, и если оно существует, меняет фон.
  let chosen_color = localStorage.getItem("--my-site-bg-color");
  if (chosen_color) {
    document.body.style.backgroundColor = chosen_color;
  }

  /***/
  let i = 0, colors = [ "#123", "#811", "#b50" ];

  document.querySelector("#btn").addEventListener("click", function() {
    let curr_color = colors[i];

    document.body.style.backgroundColor = curr_color;  
    localStorage.setItem("--my-site-bg-color", curr_color);

    i = (i + 1) % colors.length; // % — остаток от деления.
    // Как только `i` выходит за пределы массива, возвращается обратно на 0.
  });
</script>

Здесь не работает localStorage. Рабочий пример → https://jsfiddle.net/oz0ys1wp/

БЛОГ НА HUSL

Клик для выбора фона на сайте

Ответы (1 шт):