Показать сообщение отдельно
  #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>
Ответить с цитированием