Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.02.2021, 16:49
Новичок на форуме
Отправить личное сообщение для Sonya00 Посмотреть профиль Найти все сообщения от Sonya00
 
Регистрация: 06.05.2020
Сообщений: 6

Не передается событие в функцию
НЕ срабатывает событие 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')
  }
}
Ответить с цитированием
  #2 (permalink)  
Старый 10.02.2021, 19:52
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 1,104

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

idF1.addEventListener('input', e => redId);
Это вы так функцию redId вызываете?
Ответить с цитированием
  #3 (permalink)  
Старый 11.02.2021, 10:05
Новичок на форуме
Отправить личное сообщение для Sonya00 Посмотреть профиль Найти все сообщения от Sonya00
 
Регистрация: 06.05.2020
Сообщений: 6

Вот все... Нееет, это я передумаю в функцию событие(пытаюсь передать)
<!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;
}
Ответить с цитированием
  #4 (permalink)  
Старый 11.02.2021, 10:18
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 1,104

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

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

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

Последний раз редактировалось voraa, 11.02.2021 в 10:37.
Ответить с цитированием
  #5 (permalink)  
Старый 11.02.2021, 16:37
Новичок на форуме
Отправить личное сообщение для Sonya00 Посмотреть профиль Найти все сообщения от Sonya00
 
Регистрация: 06.05.2020
Сообщений: 6

Вот конкретно тут у меня не работает в этой функции событие "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')
  }
}
Ответить с цитированием
  #6 (permalink)  
Старый 11.02.2021, 17:16
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 1,104

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

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

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

Последний раз редактировалось voraa, 11.02.2021 в 17:20.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как правильно повесить функцию на событие? CryNet Общие вопросы Javascript 5 03.01.2019 00:58
Получить событие которая вызвала функцию skoriylight Events/DOM/Window 1 27.06.2015 19:47
Не передается параметр в функцию Velidan Общие вопросы Javascript 3 13.02.2015 14:32
вынести событие в функцию And5 jQuery 3 18.05.2014 18:07
Повесить функцию на событие при помощи javascript фонарик Общие вопросы Javascript 2 23.02.2013 20:50