Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.06.2017, 05:56
Профессор
Отправить личное сообщение для DivMan Посмотреть профиль Найти все сообщения от DivMan
 
Регистрация: 08.03.2016
Сообщений: 429

Событие input, проверка значения
Появляется тот блок с классом, которое передаётся через input.

Проблема в том, что, когда число стираешь, то в консоле появляется ошибка Uncaught TypeError: Cannot read property 'classList' of undefined

Не понимаю почему, я же написал условие, если такого элемента в массиве нет, то ничего делать не надо

<style>
.hidden {
  display: none;
}

.img {
  width: 200px;
  height: 200px;
}

.img1 {background: green;}
.img2 {background: blue;}
.img3 {background: red;}
</style>

<input type="text" class="input">

<div class="img img1 hidden"></div>
<div class="img img2 hidden"></div>
<div class="img img3 hidden"></div>

<script>
var input =  document.querySelector('.input');

var img = document.querySelectorAll('.img');

var arr = [];
img.forEach(function(el, i) {
  arr.push(i);
 })
 

input.oninput = function() {
	img.forEach(function(element, i) {
  
  	if(arr.indexOf(Number(input.value)) != -1) {
    	img[input.value - 1].classList.remove('hidden');
    }
  	else{
    	img[i].classList.add('hidden');
    }
    
  })
}
</script>
Ответить с цитированием
  #2 (permalink)  
Старый 24.06.2017, 09:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

DivMan,
Number(input.value) равен нулю если value = "", img[input.value - 1] будет img[-1] - такого элемента нет
Ответить с цитированием
  #3 (permalink)  
Старый 24.06.2017, 14:01
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

<html>
<head>
	<meta charset="utf-8">
	<style>
		.hidden {
			display: none;
		}
		.img {
			width: 200px;
			height: 200px;
		}
		.img1 {background: green;}
		.img2 {background: blue;}
		.img3 {background: red;}
	</style>
</head>
<body>
	<input type="text" class="input">

	<div class="img img1 hidden"></div>
	<div class="img img2 hidden"></div>
	<div class="img img3 hidden"></div>

	<script>
		var input =  document.querySelector('.input');
		input.oninput = function() {
			var img = document.querySelectorAll('.img'), i = img.length, v = input.value-1;
			while (i--) img[i].classList.add('hidden');
			if (v>=0 && v <3) img[v].classList.remove('hidden');
		};
	</script>
</body>
</html>

так?

Последний раз редактировалось j0hnik, 24.06.2017 в 14:05.
Ответить с цитированием
  #4 (permalink)  
Старый 24.06.2017, 22:17
Профессор
Отправить личное сообщение для DivMan Посмотреть профиль Найти все сообщения от DivMan
 
Регистрация: 08.03.2016
Сообщений: 429

Ну вот, я изменил, теперь по идеи должно правильно работать, но почему-то не работает, и не понятно, почему не добавляет класс hidden, если в input пусто?

var input =  document.querySelector('.input');

var img = document.querySelectorAll('.img');

var arr = [];
img.forEach(function(el, i) {
  arr.push(i);
 })
 
 console.log(arr)
 

input.oninput = function() {

console.log(input.value);

	img.forEach(function(element, i) {
  	if(arr.indexOf(Number(input.value)) != -1) {
    	img[input.value].classList.remove('hidden');
    }
    
     if(input.value == '') {
    	img[i].classList.add('hidden');
      console.log('Пусто');
    }
 
  })
}
Ответить с цитированием
  #5 (permalink)  
Старый 24.06.2017, 22:18
Профессор
Отправить личное сообщение для DivMan Посмотреть профиль Найти все сообщения от DivMan
 
Регистрация: 08.03.2016
Сообщений: 429

Вот так ошибок не выдаёт, но почему-то если стереть поле, то элемент не удаляется, я же для этого, аж 2 условия сделал.

var input =  document.querySelector('.input');

var img = document.querySelectorAll('.img');

var arr = [];
img.forEach(function(el, i) {
  arr.push(i);
 })
 
 console.log(arr)
 

input.oninput = function() {

console.log(input.value);

	img.forEach(function(element, i) {
  	if(input.value == '') { 
    	img[i].classList.add('hidden'); 
     } 
    if(arr.indexOf(Number(input.value)) != -1) {      img[Number(input.value)].classList.remove('hidden');
    } 
    else {
    		img[i].classList.add('hidden'); 
    }
 
  })
}
Ответить с цитированием
  #6 (permalink)  
Старый 24.06.2017, 22:41
Профессор
Отправить личное сообщение для DivMan Посмотреть профиль Найти все сообщения от DivMan
 
Регистрация: 08.03.2016
Сообщений: 429

А вот так, скрывает все элементы, но почему-то самый первый не скрывает

<style>
.hidden {
  display: none;
}

.img {
  width: 200px;
  height: 200px;
}

.img1 {background: green;}
.img2 {background: blue;}
.img3 {background: red;}
</style>

<input type="text" class="input">

<div class="img img1 hidden"></div>
<div class="img img2 hidden"></div>
<div class="img img3 hidden"></div>

<script>
var input =  document.querySelector('.input');

var img = document.querySelectorAll('.img');

var arr = [];
img.forEach(function(el, i) {
  arr.push(i);
 })
 
 console.log(arr)
 

input.oninput = function() {
 console.log(img[Number(input.value)])
	img.forEach(function(element, i) {
  
  if(arr.indexOf(Number(input.value)) != -1) {      	      img[Number(input.value)].classList.remove('hidden');
    } 
  	if(input.value === '') { 
    	element.classList.add('hidden'); 
      
     } 
    
 
  })
}
</script>
Ответить с цитированием
  #7 (permalink)  
Старый 24.06.2017, 22:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

DivMan,

<html>
<head>
  <meta charset="utf-8">
  <style>
    .hidden {
      display: none;
    }
    .img {
      width: 200px;
      height: 200px;
    }
    .img1 {background: green;}
    .img2 {background: blue;}
    .img3 {background: red;}
  </style>
</head>
<body>
  <input type="text" class="input">

  <div class="img img1 hidden"></div>
  <div class="img img2 hidden"></div>
  <div class="img img3 hidden"></div>

  <script>
var input = document.querySelector(".input");
var img = document.querySelectorAll(".img");
var arr = [];
img.forEach(function(el, i) {
    arr.push(i)
});
console.log(arr);
input.oninput = function() {
    console.log(input.value);
    img.forEach(function(element, i) {
        if (input.value - 1 == i) img[i].classList.remove("hidden");
        else img[i].classList.add("hidden")
    })
};
  </script>
</body>
</html>
Ответить с цитированием
  #8 (permalink)  
Старый 24.06.2017, 22:59
Профессор
Отправить личное сообщение для DivMan Посмотреть профиль Найти все сообщения от DivMan
 
Регистрация: 08.03.2016
Сообщений: 429

Спасибо
Ответить с цитированием
  #9 (permalink)  
Старый 24.06.2017, 23:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

DivMan,
arr лишний ... строки 27 - 31
Ответить с цитированием
  #10 (permalink)  
Старый 24.06.2017, 23:05
Профессор
Отправить личное сообщение для DivMan Посмотреть профиль Найти все сообщения от DivMan
 
Регистрация: 08.03.2016
Сообщений: 429

Но я всё равно не понимаю, почему, если написать так

if (input.value == i) img[i].classList.remove("hidden");

     else {
       img[i].classList.add("hidden");
       }


то первый элемент не удаляется?

Вот я допустим ввожу 1 и появился второй блок, потом я его стираю и получается должно сработать условие else, потому что в инпуте нету такого значение, которое в i, там сейчас пусто и не понятно, почему в таком случае, не удаляется первый блок?
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Динамическое копирование значения из input в input с одинаковыми атрибутами name ami_moor jQuery 2 10.08.2016 17:02
Проверка значения в input stepanenkoalex91 Events/DOM/Window 3 15.06.2016 14:22
Множественные значения в input - ЗА ВОЗНАГРАЖДЕНИЕ! Pb160 Events/DOM/Window 0 03.08.2015 12:29
Событие на input radio redwert Элементы интерфейса 3 23.09.2014 09:45
При добавлении DOCTYPE "плывут" размеры input type=text Demath (X)HTML/CSS 4 08.07.2012 19:27