[DivMan]

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

<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>