Форум

рони · #11 (**permalink**) 24.06.2017, 23:09

Сообщение от DivMan

Вот я допустим ввожу 1

то есть массивы начинаются у вас с индекса 1 , а не ноль?

DivMan · #12 (**permalink**) 24.06.2017, 23:12

Массивы начинаются с 0

DivMan · #13 (**permalink**) 24.06.2017, 23:14

Когда ввожу 0, то появляется первый блок

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

Но не понятно, почему он не удаляется, если в инпуте пусто, должно же сработать условие else, а оно почему-то не работает.

рони · #14 (**permalink**) 24.06.2017, 23:25

DivMan,

alert("" == 0)

DivMan · #15 (**permalink**) 24.06.2017, 23:29

Вот так, я полностью понимаю

<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");


input.oninput = function() {
   
    img.forEach(function(element, i) {
    
    	if(input.value.length == 0) {
      	img[i].classList.add("hidden");
        return false;
      }
        if (input.value == i) {
        	img[i].classList.remove("hidden");
        }
        else {
        	img[i].classList.add("hidden");
        }
    })
};
</script>

рони · #16 (**permalink**) 24.06.2017, 23:38

Сообщение от DivMan

Вот так, я полностью понимаю

рони · #17 (**permalink**) 24.06.2017, 23:40

DivMan,
для 0 ... 1 ... 2

<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");
input.oninput = function() {
    console.log(input.value);
    img.forEach(function(element, i) {
        if (input.value.trim() && input.value == i) img[i].classList.remove("hidden");
        else img[i].classList.add("hidden")
    })
};
  </script>
</body>
</html>

DivMan · #18 (**permalink**) 25.06.2017, 00:10

То есть в поле, если всё стереть, то всё равно остаётся пробел?

рони · #19 (**permalink**) 25.06.2017, 00:38

DivMan,
не пробел, а пустая строка.

DivMan · #20 (**permalink**) 25.06.2017, 01:31

Всё таки наверно буду использовать мой вариант, он для меня понятней

Форум

Справочник

Discord чат

Курсы javascript