Вывод елемента(изображения) по тегу, имя которого введённый в инпуте

#javascript

Нужно вывести правильное изображение после ввода в input, все изображения имеют совпадения
с данными из атрибута data-tag. 

Есть 6 изображений. На них изображено то, что прописано в data-tag. На странице мы
должны вывести нужную картинку вписав значение этого тега. 

Например на первой картинке изображена игра бейсбол. 

Вывод картинки осуществляется вводом слов baseball, sport или people.



window.onload = function() {

  var elem = document.getElementsByTagName('img');
  var lista = [elem[0], elem[1], elem[2], elem[3], elem[4], elem[5]]
  var botoonShow = document.getElementById('showButton');
  var botooHide = document.getElementById('hideButton');
  var inputt = document.getElementsByTagName('input')[0];
  var inp = document.getElementById("tagInput")
  botoonShow.onclick = function() {
    oninput = function() {
      document.getElementById('txtprev1').innerHTML = document.getElementById("tagInput").value;

    };
    oninput();
  };
  botooHide.onclick = function() {
    document.getElementById('txtprev1').remove();
  };
};


  

    
    
    
    
    
    
  

  
  

  
  



    

Ответы

Ответ 1

window.onload = function() {

  var botoonShow = document.getElementById('showButton');
  var botooHide = document.getElementById('hideButton');

  botoonShow.onclick = function() {
    hideAll();
    
    var inp = document.getElementById("tagInput");
    inp.value.split(",").forEach(tag => {
      document.querySelectorAll("#gallery img[data-tag*='," + tag + ",']").forEach(
        i => i.classList.remove("hide"));
    });
  };

  botooHide.onclick = hideAll;
  function hideAll() {
    var imgs = document.querySelectorAll("#gallery img");
    imgs.forEach(i => i.classList.add("hide"));
  }
  
  hideAll();
};
.hide {
  display:none;
}