Форум

stormur · #1 (**permalink**) 11.01.2018, 13:09

Помогите пожалуйста новичку!
Не прошу писать весь код, просто направьте в нужную сторону

Есть <textarea id='message' placeholder='hello!'></texarea> и кнопка <div id='button'>Send</div>

Какой код нужен для того, чтобы при вводе в <textarea> текста кнопка меняла свой цвет.

Спасибо

ksa · #2 (**permalink**) 11.01.2018, 13:49

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

и кнопка <div id='button'>Send</div>

Это не кнопка...

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

Не прошу писать весь код

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

Какой код нужен для того, чтобы при вводе в <textarea> текста кнопка меняла свой цвет.

Нипанятна.

Как вариант:
- используй обработчик onkeyup на textarea
- читай значение текста в textarea
- анализируй это значение и добавляй или убирай специальный класс (типа on|off) у ДИВа с id='button'

Dilettante_Pro · #3 (**permalink**) 11.01.2018, 13:52

stormur,
Например, написать обработчик для textarea по событию oninput, в котором менять для div style.backgroundColor.
Можно с учетом количества введенных символов.

j0hnik · #4 (**permalink**) 11.01.2018, 15:07

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#button{
			width: 150px;
			border: 1px solid gray;
		}
	</style>
</head>
<body>
<textarea id='message' placeholder='hello!'></textarea>
<div id='button'>Send</div>
	<script>
	var col = 1111;
	document.querySelector('#message').onkeypress=e=>{
		col++;
	document.querySelector('#button').style.backgroundColor = '#'+ col .toString(16);
};
	</script>
</body>
</html>

j0hnik · #5 (**permalink**) 11.01.2018, 15:08

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#button{
			width: 150px;
			border: 1px solid gray;
			background-color: red;
		}
	</style>
</head>
<body>
<textarea id='message' placeholder='hello!'></textarea>
<div id='button'>Send</div>
	<script>
	document.querySelector('#message').onkeypress=e=>document.querySelector('#button').style.backgroundColor = 'green';
	</script>
</body>
</html>

Dilettante_Pro · #6 (**permalink**) 11.01.2018, 15:17

j0hnik,
А если очистить textarea после заполнения, то кнопка все равно зеленая...

Dilettante_Pro · #7 (**permalink**) 11.01.2018, 15:22

j0hnik,
И еще: обработчик onkeypress реагирует только на клавиатуру, а oninput и на копипаст тоже.

j0hnik · #8 (**permalink**) 11.01.2018, 17:32

Dilettante_Pro,

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#button{
			width: 150px;
			border: 1px solid gray;
			background-color: red;
		}
	</style>
</head>
<body>
<textarea id='message' placeholder='hello!'></textarea>
<div id='button'>Send</div>
	<script>
	document.querySelector('#message').oninput=e=>document.querySelector('#button').style.backgroundColor = e.target.value?'green':'red';
	</script>
</body>
</html>

Dilettante_Pro · #9 (**permalink**) 11.01.2018, 17:36

j0hnik,
Красота

Форум

Справочник

Discord чат

Курсы javascript