А вот так, скрывает все элементы, но почему-то самый первый не скрывает
<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>