Показ картинки при вводе слова

331
25 мая 2017, 10:50

Доброго времени суток.

Необходима Ваша помощь по реализации следующего:

При вводе определенного текста, к примеру "apple" в текстовой строке загружалась/появлялась картинка яблоки. Вот мой html:

<input type="text" onchange="showMe(value)">
<div class = 'div1'></div>

Не знаю как реализовать функцию showMe(value) на js.

Саму задачу желательно реализовать на Macromedia Flash Professional. Но можно и на Javascript

Answer 1

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

Соответствующие картинки появляются только при вводе определенных слов(например Яблоки или яблоки). Все лишние слова просто игнорируются

ПОСЛЕДНИЕ ВОПРОСЫ
Все вопросы
Подробнее о сайте standart-s.com.ua
ТОП-10
READ ALSO
Как итерерироваться по Map в typescript?
javascript

Как итерерироваться по Map в typescript?

Использую Angular 2'У меня есть сервисStatisticsService` с таким методом:

 254
Ошибка при компиляции webpack
javascript

Ошибка при компиляции webpack

Имеется такой конфиг:

 246
jQuery custom content scroller + scrollreveal или fadeIn content
javascript

jQuery custom content scroller + scrollreveal или fadeIn content

Добрый, для скрол использую custom content scroller, по факту же получается что плагин создает обертку для контента в которой прокручивает контент,...

 250
Метод filter для массива - непонятное условие
javascript

Метод filter для массива - непонятное условие

Есть задачкаУдалить все элементы из массива (arguments[0]), которые содержат значения из arguments[1], [2]

 239