Как задать фон объекту при использовании Color input

Question

Как передать значение выбранного цвета? Нужно чтобы цвет фона у <p> становился таким, какой выбрали в палитре input color и оставался таким после f5.

    <!doctype html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>Цвет</title>
        </head>
        <body>
<div id="windiw3">
            <p  class="color_input">Январь <input class="color_input" type="color" name="bg" value="#88c1ff">
            <p  class="color_input">Февраль <input class="color_input" type="color" name="bg" value="#5eff37">
        </div>
        </body>
    </html>

Answer 1

StackOverflow не поддерживает localStorage Испытайте код на своём пк

const changeColor = document.querySelectorAll('.change_color');
  const changeFont = document.querySelectorAll('.change_font');

  const colorTextInput = document.getElementById('change_text');
  const colorFontInput = document.getElementById('change_font');

  const defaultText = '#000', defaultFont = 'transparent';

  colorTextInput.addEventListener('input', function() {
    colorChangeForText(this.value);
  })

  colorFontInput.addEventListener('input', function() {
    colorChangeForFont(this.value);
  })

  function colorChangeForText(color) {
    localStorage.setItem('text', color);

    updateColor();
  }

  function colorChangeForFont(color) {
    localStorage.setItem('font', color);

    updateColor();
  }

  function updateColor() {
    let textColor = localStorage.getItem('text') == null ? defaultText : localStorage.getItem('text');
    let fontColor = localStorage.getItem('font') == null ? defaultFont : localStorage.getItem('font');;

    for (let i = 0; i < changeColor.length; i++) {
      changeColor[i].style.color = textColor;
    }

    for (let i = 0; i < changeFont.length; i++) {
      changeFont[i].style.backgroundColor = fontColor;
    }
  }

  updateColor();

<div id="windiw3">
  <p class="color_input change_color">
    Цвет<input class="color_input" type="color" name="bg" value="#88c1ff" id="change_text">
  </p>
  <p class="color_input change_font">
    Фон <input class="color_input" type="color" name="bg" value="#5eff37" id="change_font">
  </p>

  <p class="change_font change_color">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis necessitatibus, excepturi et soluta exercitationem quia fugit nobis quo vero distinctio incidunt voluptate repudiandae ullam ducimus maxime voluptatum dolorem magnam non?
  </p>

  <button onclick="localStorage.clear();updateColor()">Очистить</button>
</div>

БЛОГ НА HUSL

Как задать фон объекту при использовании Color input

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