Форум

Sonya00 · #1 (**permalink**) 10.02.2021, 17:49

НЕ срабатывает событие input для функции redId, работает только
если повторно нажать на button

let btns = document.querySelector('.btns__student__and__teacher');
let btn = document.querySelectorAll('button');
let idF1 = document.getElementById('id__f1');

document.getElementById('student').classList.add('active');

btns.addEventListener('click', start);
idF1.addEventListener('input', e => redId); 
/*НЕ срабатывает событие input для функции redId, работает только
если повторно нажать на button*/

object = {
	student: {
		placeholder: `ID #0000`,
		length_size: 4
	},

	teacher: {
		placeholder: `ID #000000`,
		length_size: 6
	}
}

function start(e) {
	if (e.target.classList.contains('btn')) {
		for (i = 0; i < btn.length; i++) {
			btn[i].classList.remove('active');
		}
		e.target.classList.add('active');
		placeholder(e.target.id)
		redId(idF1, e.target.id)
		console.log(e);
	}


}

function placeholder(key) {
	idF1.placeholder = object[key].placeholder;
}

function redId(el, key, e) {
  if (el.value.length < object[key].length_size) {
    el.classList.add('red')
  }
  else {
    el.classList.remove('red')
  }
}

voraa · #2 (**permalink**) 10.02.2021, 20:52

А о HTML мы как догадываться будем?

idF1.addEventListener('input', e => redId);
Это вы так функцию redId вызываете?

Sonya00 · #3 (**permalink**) 11.02.2021, 11:05

Вот все... Нееет, это я передумаю в функцию событие(пытаюсь передать)

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="css/style.css">
	<title>Добавление</title>
</head>
<body>
	<div class="container">
		<div class="reg">
			<h1>Добавить в базу данных</h1>
			<div class="btns__student__and__teacher">
				<div class="form-input">
					<button class="btn" id="student">Студент</button>
				</div>
				<div class="form-input">
					<button class="btn" id="teacher">Преподаватель</button>
				</div>
			</div>

			<div class="full__name">
				<div class="form-input">
					<label for="surname">Фамилия</label>
					<input id="surname" type="text">
				</div>
				<div class="form-input">
					<label for="name">Имя</label>
					<input id="name" type="text">
				</div>
				<div class="form-input">
					<label for="middle__name">Отчество</label>
					<input id="middle__name" type="text">
				</div>
			</div>

			<div class="id">
				<div class="form-input">
					<label for="id__f1">ID</label>
					<input id="id__f1" type="text" placeholder="ID #0000">
				</div>

				<div class="display__block__student">
				<div class="form-input">
					<label for="group">Группа</label>
					<select id="group">
						<option>П-41</option>
						<option>П-11</option>
						<option>ИС-31</option>
					</select>
				</div>
			</div>
			</div>

			<div class="password__repeat__password">
				<div class="form-input">
					<label for="password">Пароль</label>
					<input id="password" type="password">
				</div>
				<div class="form-input">
					<label for="repeat__password">Повторить пароль</label>
					<input id="repeat__password" type="password">
				</div>
			</div>

			<div class="add__user">
				<div class="form-input">
					<button id="add">Добавить</button>
				</div>
			</div>
		</div>
	</div>
<script src="js/script.js"></script>
</body>
</html>

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	width: 100%;
	height: 100%;
	font-family: sans-serif;
}

.container {
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	width: 900px;
	height: 600px;
	margin: 0 auto;
	position: absolute;
	top: calc(50% - 300px);
	left: 0;
	right: 0;
}

h1 {
	text-transform: uppercase;
	letter-spacing: 5px;
	font-size: 30px;
	color: #93969B;
	opacity: 0.8;
	padding: 0 0 20px 0;
}

.reg {
	width: 700px;
	padding: 20px 30px 20px 30px;
	text-align: center;
	border: 1px solid #93969B;
}

.reg .form-input {
	padding: 10px;
	font-size: 14px;
	letter-spacing: 2px;
}

.reg .form-input input, button, #group {
	width: 200px;
	padding: 10px;
	outline: none;
}

button {
	border: none;
	background-color: #007FFF;
	color: #fff;
	font-weight: bold;
	cursor: pointer;
	transition: 0.4s;
}

.reg .form-input button:hover {
	background: #2A52BE;
	letter-spacing: 2px;
}

.reg .btns__student__and__teacher, .display__block__student, .full__name, .id, .password__repeat__password {
	display: flex;
	justify-content: center;
}

.reg .btns__student__and__teacher {
	padding: 0 0 20px 0;
}

.reg .password__repeat__password {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.reg .display__block__student {
	display: none;
}

.reg .form-input label {
	display: flex;
	justify-content: flex-start;
	padding: 0 0 4px 0;
	color: #93969B; 
}

.add__user {
	padding: 20px 0 0 0;
}

.active {
	background: #2A52BE;
}

.red {
	border: 2px solid red;
}

::-webkit-input-placeholder { /* WebKit browsers */
   color:    #93969B;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #93969B;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #93969B;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
   color:    #93969B;
}

voraa · #4 (**permalink**) 11.02.2021, 11:18

А где js без передумывания и что сейчас не работает?

Показывать что то в placeholder - плохая практика.
Вот видит пользователь ID #000000, начинает набирать, а подсказка то уже пропала. А он может и не обратил внимание, есть там пробел пред # или нет? И сколько там нулей было не посчитал заранее. Что бы все это увидеть ему придется стереть написанное.
Лучше подсказку держать всегда над/сбоку от поля, если она так необходима
А в поле иметь атрибут pattern и по нему проверять правильность ввода.
Можно использовать псевдоклассы :invalid/:valid в CSS.

Непонятно зачем надо вводить 'ID #' если они там должны быть всегда. Ну либо сразу сделать value = "ID #", либо пусть вводит только номер, а этот префикс добавлять программно, если он так необходим.

Sonya00 · #5 (**permalink**) 11.02.2021, 17:37

Вот конкретно тут у меня не работает в этой функции событие "input"

idF1.addEventListener('input', el => redId);

Я хочу чтобы при вводе недостаточного кол-во символов на 'ID' "border" был красный а при полном введении нужного кол-во символов красный "border" убирался

function redId(el/*ID передаю*/, key, e) {
  if (el.value.length < object[key].length_size) {
    el.classList.add('red')
  }
  else {
    el.classList.remove('red')
  }
}

voraa · #6 (**permalink**) 11.02.2021, 18:16

idF1.addEventListener('input', el => redId);

Еще раз спрашиваю, это вы так функцию redId вызываете?
А как и какие параметры вы ей передаете?
Чему в ней будет el, key, и e?

Функции вызываются redId(какие то параметры)

Форум

Справочник

Discord чат

Курсы javascript