backgroundColorChanger

backgroundColor

Changer

Начнем с HTML

Что-то новенькое

Сегодня мы познакомимся с элементом «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»