Как заменить цвет блока на введённое значение в input type="seach"?

Question

[Tim On]

Как сделать так, что бы при вводе цвета в поле поиска, и последующего нажатия на button менялся background div-a на введённый цвет?
Без библиотек.

Заранее спасибо.

Answer 1

[Кирилл Резанов]

Можешь просто брать значение этого поля и подставлять его в свойство elem.style.backgroundColor = input.value;
Т.е.

<div id="div">
  </div>
  <input class="color" />
  <button class="change_color">Change Color</button>

const button = document.querySelector(".change_color");
  button.onclick = () => {
    const color = document.querySelector(".color").value;
    const div = document.querySelector(".div");
    div.style.backgroundColor = color;
  }

При вводе валидного значения цвета, допустим: black, white, #fff, #ffffff, rgb(120,250,70) в стиль дива будет подставляться цвет и будет применено CSS свойство

Comments

[Tim On]

Благодарю.