Событие в зависимости от введенной цифры в текстовое поле
Есть поле <input type="text">.
Если пользователь пишет туда слово - синий, цвет фона (страницы) должен стать синим, если красный, фон должен стать соответственно красным. Подскажите как это реализовать? |
Цитата:
- Перехватывать события изменения поля - Прочитать значений того инпута - Проанализировать значение и определить цвет фона - изменить таки фон |
самый примитивный вариант
<!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>
если много цветов можно создать массив или объект |
если на инглише писать можно так
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="text">
<script>
document.querySelector("input").oninput=function(){
document.body.style.backgroundColor = this.value;
};
</script>
</body>
</html>
|
для современных браузеров
<!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>
|
| Часовой пояс GMT +3, время: 11:56. |