js как выводить картинки при вводе текста

Question

пожалуйста, подскажите: стоит задача при вводе букв выводить на экран в качестве перевода картинки закрепленные за каждой буквой.

Здесь я уже нашел похожий скрипт, который может выводить конкретную (одну) картинку при написании (одного) слова. Я понимаю как за каждой буквой закрепить нужную картинку, но не пойму как сделать вывод всех картинок скопом (в строчку) если вводишь множество букв (слов)?

код:

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <input type="text" onchange="showMe(value)">
  <div class='div1'></div>
  <script>
    function showMe(value) {
      this.value = value;
      let div = document.querySelector('.div1');
      if ((this.value === 'Яблоки') || (this.value === 'яблоки') || (this.value === 'apple`s') || (this.value === 'Apple`s')) {
        div.innerHTML = '';
        div.insertAdjacentHTML('afterBegin', '<img src = "http://findfood.ru/attaches/product/fructi/yabloko.jpg">');
      } else if ((this.value === 'Груши') || (this.value === 'груши') || (this.value === 'Pears') || (this.value === 'pears')) {
        div.innerHTML = '';
        div.insertAdjacentHTML('afterBegin', '<img src = "http://chem-polezno.com/img/728xNxgrusha.jpg.pagespeed.ic.wiMtB_xELs.jpg">');
      } else if ((this.value === 'Мандарины') || (this.value === 'мандарины') || (this.value === 'Mandarins')|| (this.value === 'mandarins')) {
        div.innerHTML = '';
        div.insertAdjacentHTML('afterBegin', '<img src = "http://polza-vred.su/wp-content/uploads/2014/02/%D0%9C%D0%B0%D0%BD%D0%B4%D0%B0%D1%80%D0%B8%D0%BD%D1%8B1-300x172.jpg">');
      } else {
        div.innerHTML = '';
      }
    }
  </script>
</body>

</html>

Answer 1

Весьма незамысловато: сначала проверяйте значение ввода не на точное соответствие, а на присутствие подстроки в строке (есть слово яблоки в значении ввода). После чего задаете внешней переменной булево значение как индикатор - очищать картинки или нет, это используется для того, чтобы при срабатывании нескольких условий контейнер полностью не очищался при каждом добавлении картинки.

string.prototype.includes - справка

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <input type="text" onchange="showMe(value)">
  <div class='div1'></div>
  <script>
    function showMe(value) {
      let values = value.toLowerCase().split(" ");
      let div = document.querySelector('.div1');
      
      let keep = false;
      
      for (let value of values) { 
        if ( (value.includes('яблоки')) || (value.includes('apple`s')) ) {
          if (!keep) {
            div.innerHTML = '';
          }
          div.insertAdjacentHTML('beforeend', '<img src = "http://findfood.ru/attaches/product/fructi/yabloko.jpg">');
          keep = true;
        } 
        if ( (value.includes('груши')) || (value.includes('pears')) ) {
          if (!keep) {
            div.innerHTML = '';
          }
          div.insertAdjacentHTML('beforeend', '<img src = "http://chem-polezno.com/img/728xNxgrusha.jpg.pagespeed.ic.wiMtB_xELs.jpg">');
          keep = true;
        } 
        if ((value.includes('мандарины')) || (value.includes('mandarins')) ) {
          if (!keep) {
            div.innerHTML = '';
          }
          div.insertAdjacentHTML('beforeend', '<img src = "http://polza-vred.su/wp-content/uploads/2014/02/%D0%9C%D0%B0%D0%BD%D0%B4%D0%B0%D1%80%D0%B8%D0%BD%D1%8B1-300x172.jpg">');
          keep = true;
        }
       }
    }
  </script>
</body>

</html>

Answer 2

В результате поиска было найдено еще одно решение данной задачи:

function showMe(value) {
let div = document.querySelector(".div1");
div.innerHTML = "";
value
    .split("")
    .reverse()
    .forEach((e) => {
        switch (e.toLowerCase()) {
            case "яблоко":
                div.insertAdjacentHTML("afterBegin", '<img src = "/img/apple.png">');
                break;
            case "мандарин":
                div.insertAdjacentHTML("afterBegin", '<img src = "/img/tangerine.png">');
                break;
            case "банан":
                div.insertAdjacentHTML("afterBegin", '<img src = "/img/banana.png">');
                break;
        }
    });
}

БЛОГ НА HUSL

js как выводить картинки при вводе текста

Ответы (2 шт):