通过数组显示图像时遇到麻烦

Question

我正在使用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.log("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>

目前未显示任何内容。我有感觉在循环函数内部编写了错误的语法吗？我将不胜感激的解决方案和提示。谢谢。

Answer 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.log("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>