Событие 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>
|
DivMan,
Number(input.value) равен нулю если value = "", img[input.value - 1] будет img[-1] - такого элемента нет |
<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>
так? |
Ну вот, я изменил, теперь по идеи должно правильно работать, но почему-то не работает, и не понятно, почему не добавляет класс 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('Пусто');
}
})
}
|
Вот так ошибок не выдаёт, но почему-то если стереть поле, то элемент не удаляется, я же для этого, аж 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');
}
})
}
|
А вот так, скрывает все элементы, но почему-то самый первый не скрывает
<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>
|
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>
|
Спасибо
|
DivMan,
arr лишний ... строки 27 - 31 |
Но я всё равно не понимаю, почему, если написать так
if (input.value == i) img[i].classList.remove("hidden");
else {
img[i].classList.add("hidden");
}
то первый элемент не удаляется? Вот я допустим ввожу 1 и появился второй блок, потом я его стираю и получается должно сработать условие else, потому что в инпуте нету такого значение, которое в i, там сейчас пусто и не понятно, почему в таком случае, не удаляется первый блок? |
| Часовой пояс GMT +3, время: 11:47. |