Форум

Jimmi · #1 (**permalink**) 28.08.2017, 07:17

Есть поле <input type="text">.
Если пользователь пишет туда слово - синий, цвет фона (страницы) должен стать синим, если красный, фон должен стать соответственно красным.

Подскажите как это реализовать?

ksa · #2 (**permalink**) 28.08.2017, 08:49

Сообщение от Jimmi

Подскажите как это реализовать?

Как вариант...
- Перехватывать события изменения поля
- Прочитать значений того инпута
- Проанализировать значение и определить цвет фона
- изменить таки фон

j0hnik · #3 (**permalink**) 28.08.2017, 09:20

самый примитивный вариант

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="text">
	<script>
document.querySelector("input").oninput=function(){
if(this.value == 'красный') document.body.style.backgroundColor = 'red';
else if(this.value == 'синий') document.body.style.backgroundColor = 'blue';
else document.body.style.backgroundColor= 'white';
};
	</script>
</body>
</html>

если много цветов можно создать массив или объект

j0hnik · #4 (**permalink**) 28.08.2017, 09:22

если на инглише писать можно так

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="text">
	<script>
document.querySelector("input").oninput=function(){
document.body.style.backgroundColor = this.value;
};
	</script>
</body>
</html>

j0hnik · #5 (**permalink**) 28.08.2017, 09:39

для современных браузеров

<!DOCTYPE html>
<html>
<head>
</head>
<body>
	<input type="text">
	<script>
		var color=[['красный','red'],['синий','blue'],['зеленый','green'],['желтый','yellow'],['фиолетовый','violet'],['оранжевый','orange']];
		document.querySelector("input").oninput =e=>document.body.style.backgroundColor = color.find(el => el[0] == e.target.value)[1];
	</script>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript