通过数组显示图像时遇到问题

Question

I am practicing with JavaScript Array function. What I want to achieve is to show google embedded images inside the display section when the user clicks "Show my grocery list" button after entering "banana", else the texts will be shown instead.

These are my codes.

 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>

It is currently not showing anything. I have a feeling that I have written a wrong syntax inside the loop function? I would appreciate a solution and tips. Thank you.

Answer 1

You've to remove the keyCode=13 condition first and then need to create an img element with src of image based on condition (groceryList[i] == "banana") to display the image inside the <div> element, For example:

 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>