backgroundColorChanger

Сегодня мы познакомимся с элементом «label»

Данный элемент позволяет нам подписать элемент «input».

Попробуй создать тег «label» и укажи у него атрибут «for» со значением «colorPicker»

Сегодня мы познакомимся с элементом «input»

Данный элемент позволяет нам получить ввод от пользователя

Попробуй создать тег «input» и укажи у него атрибут «type» со значением «color» и id «colorPicker»

Создай тег «button» и укажи туда какое-нибудь название: «ClickMe»

Сначала нам нужно будет познакомиться с переменной.

Переменная - это коробка, в которую мы можем положить какое-то значение.

Например:

let name = "Edukoht";

let age = 1;

Создай переменную «color» и присвой ей пустую строку ("")

В JS мы также можем находить HTML-элементы, с которыми мы будем работать.

Для этого нам нужно воспользоваться вот такой конструкцией:

«document.querySelector("название элемента/класса/ID, который ищем")»

Пример создания переменной и присвоения ей выбранного элемента «p»

let searchedP = document.querySelector("p");

Создай переменную «btn» и присвой ей выбранный элемент «button»

Создай переменную «input» и присвой ей выбранный элемент «input»

Теперь поговорим о действиях. Каждому элементу в HTML можно его задать. Для этого мы воспользуемся конструкцией «addEventListener()»

Внутри круглых скобок указываются параметры. В основном мы будем использовать параметры: «click», «function»

Напиши вот такую конструкцию:

btn.addEventListener("click", function(){

})

Мы вызываем этот слушатель событий у элемента «btn», так как именно ему хотим задать действие «click»

Внутри функции укажи вот такой код:

 color = input.value

Вызов у конструкции «input» параметра «value» позволяет получить информацию, которую пользователь ввел в этот элемент

Внутри функции укажи вот такой код:

 document.body.style.backgroundColor = color

Данная конструкция позволяет поменять цвет заднего фона на полученный из элемента «input»