JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" class="input">

<div class="img img1">
  <img src="http://www.enjaztech.com/vb/uploadcenter/uploads/04-2014/PIC-298-1396432656.jpg" alt="">
</div>
<div class="img img2">
  <img src="http://3.bp.blogspot.com/-PrvE8JtAXsE/VgQe12DMoGI/AAAAAAAAATA/e7u4I_-ehQU/s1600/JavaScript%2BTooltip.png" alt="">
</div>
<div class="img img3">
  <img src="https://www.it-community.in.ua/wp-content/uploads/2014/08/JavaScript.jpg" alt="">
</div>

CSS

.img {
  display: none;
}
.showed {
  display: block;
}

JavaScript

let input = document.querySelector('.input');
input.addEventListener('input', function() {
	let value = this.value;
  if (value > 0 && value <= 3) {
  	let images = document.querySelectorAll('.img');
    images.forEach(item => {
    	item.classList.remove('showed');
    });
  	let img = document.querySelector(`.img${value}`);
  	img.classList.add('showed');
  }
});