Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.10.2017, 23:21
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 300

Как достучаться до сестринского элемента в JS ?
Подскажите, пожалуйста, как находить сестринский элемент. Вот пример
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.text_error {
		color: #f00;
	}

</style>
</head>
<body>
	<label class="field_item">
		<input class="input_login" type="text" placeholder="Login">
		<p class="about_item">Login</p>
		<p class="placeForComments"></p>
	</label>
	<label class="field_item">
		<input class="input_password" type="password" placeholder="Password">
		<p class="about_item">Password</p>
		<p class="placeForComments"></p>
	</label>

	<script>
		window.onload = function(){
			var loginInput = document.querySelector(".input_login"),
			passwordInput = document.querySelector(".input_password");

			loginInput.onblur = function() {
				if (this.value.length < 5) {
					alert("too Short"); /// Сюда надо что-то умное
				}
			};

		}
	</script>
</body>
</html>


Задача следующая - Как если в поле Login меньше 5 знаков то к первому параграфу с классом placeForComments добавить класс text_error а внутрь параграфа текст "Очень маленький текст". На jQuery эта проверка выглядела бы примерно так
$(this).parent().siblings(".placeForComments").addClass("text_error").text("Очень маленький текст");

а вот как на чистом JS, чёт не знаю.
Ответить с цитированием
  #2 (permalink)  
Старый 06.10.2017, 23:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

Black_Star,
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  .text_error {
    color: #f00;
  }

</style>
</head>
<body>
  <label class="field_item">
    <input class="input_login" type="text" placeholder="Login">
    <p class="about_item">Login</p>
    <p class="placeForComments"></p>
  </label>
  <label class="field_item">
    <input class="input_password" type="password" placeholder="Password">
    <p class="about_item">Password</p>
    <p class="placeForComments"></p>
  </label>

  <script>
    window.onload = function(){
      var loginInput = document.querySelector(".input_login"),
      passwordInput = document.querySelector(".input_password");

      loginInput.onblur = function() {
        var err = this.parentNode.querySelector(".placeForComments"),
            text = "" , metod = "remove";
       
        if (this.value.length < 5) {
          alert("too Short"); /// Сюда надо что-то умное
          text = "Очень маленький текст" ; metod = "add";
        };
        err.classList[metod]("text_error")
        err.textContent = text;

      };

    }
  </script>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 07.10.2017, 10:00
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 300

Спасибо, рони
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как подключить данные с PHP по средствам JS на удаленный сервер. Nyam Элементы интерфейса 13 11.04.2014 17:14
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 13:29
Как реализовать отключения JS кода через админку ? lamer Серверные языки и технологии 4 08.02.2012 17:23
Как то можно узнать ID HTML элемента вызвавшего JavaScript функцию? Opusel Events/DOM/Window 1 18.12.2011 18:36
Как вывести содержимое PHP файла с помощью JS? pavdin Серверные языки и технологии 6 22.12.2010 14:16