Событие input, проверка значения

350

25 июня 2017, 17:16

Появляется тот блок с классом, которое передаётся через 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>

Answer 1

У вас выполняется вот это условие

if(arr.indexOf(Number(input.value)) != -1) {
    img[input.value - 1].classList.remove('hidden');
}

В случае если input.value = '' строка Number(input.value) вернет 0, а далее вы получаете img[input.value - 1], что равно img[-1], соответственно такого элемента нет в массиве. Переделайте проверку.

input.oninput = function() {
    img.forEach(function(element, i) {
    if(arr.indexOf(Number(input.value)-1) != -1) {
        img[Number(input.value - 1)].classList.remove('hidden');
    }
    else{
        img[i].classList.add('hidden');
    }
  })
}

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Заполнение input из кнопки

Гуглил ,но не нашел подходящего ответаКак заполнить inputили textarea из кнопки

368

javascript

В чем отличие proto от prototype

Пытаюсь разобраться с наследованием в js и никак не могу понять для чего нужен prototype если есть __proto__Как я понял(из того материала что изучал),...

1173

javascript