Возникли проблемы с отображением изображения через массив

Я практикуюсь с функцией JavaScript Array. Я хочу добиться отображения встроенных изображений Google внутри раздела отображения, когда пользователь нажимает кнопку «Показать мой список покупок» после ввода «банана», иначе вместо этого будут отображаться тексты.

Это мои коды.

var grocery = document.getElementById("grocery");
let showItems = document.getElementById("showItems");
const display = document.getElementById("display");
var groceryList = [];

grocery.addEventListener("keyup",function(ev){
  if (ev.keyCode == 13){
    groceryList.push(grocery.value);
    console.info("array",groceryList);
  }
});

showItems.addEventListener("click",function(){

    for (var i = 0; i < groceryList.length;i++){
      if (groceryList[i] == "banana"){
        display.src = "https://i5.walmartimages.ca/images/Enlarge/271/747/6000191271747.jpg";
      } else {
        display.innerHTML += groceryList[i] + "<br/>";
      }
    }

});

    #display {
      width:100px;
      height:100px;
    }

  <div id = "controls">
    <input type = "text" placeholder = "grocery items" id = "grocery"/>
    <button id = "showItems">Show My Grocery List</button>
  </div>
  
  <div id = "display"></div>

В настоящее время он ничего не показывает. У меня такое ощущение, что я написал неправильный синтаксис внутри функции цикла? Буду признателен за решение и советы. Спасибо.

display - это div, а не изображение.

— 04.09.2018 03:10

* Facepalm ... Спасибо @CertainPerformance. Альтернативный вопрос! Что, если я хочу отображать изображения, вставляя URL-адрес встроенного изображения вместо текста? Есть ли способ сделать это?

— 04.09.2018 03:15

javascript html css arrays

04.09.2018 03:09

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

191

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы должны сначала удалить условие keyCode=13, а затем создать элемент img с src изображения на основе условия (groceryList[i] == "banana") для отображения изображения внутри элемента <div>, Например:

var grocery = document.getElementById("grocery");
let showItems = document.getElementById("showItems");
const display = document.getElementById("display");
var groceryList = [];

grocery.addEventListener("keyup", function(ev) {
  //if (ev.keyCode == 13){
  groceryList.push(grocery.value);
  //console.info("array",groceryList);
  //}
});

showItems.addEventListener("click", function() {

  for (var i = 0; i < groceryList.length; i++) {
    if (groceryList[i] == "banana") {
      var source = "https://i5.walmartimages.ca/images/Enlarge/271/747/6000191271747.jpg";
      var img = document.createElement("IMG"); //create img element
      img.src = source; //set img src
      display.appendChild(img); // display image inside <div>
    } else {
      display.innerHTML += groceryList[i] + "<br/>";
    }
  }

});

<div id = "controls">
  <input type = "text" placeholder = "grocery items" id = "grocery" />
  <button id = "showItems">Show My Grocery List</button>
</div>

<div id = "display"></div>

Спасибо, что предоставили мне другой метод.

— 04.09.2018 03:31

04.09.2018 03:24