Objective: My goal is to design a webpage featuring a basic image of fruits. Upon clicking the image, it should transform into an array of 6 images showcasing various types of fruits such as apples, oranges, and bananas arranged in two rows with three images each. Here's the code snippet I have managed so far:
<!DOCTYPE html>
<html>
<head>
<style>
.Fruits img {border: 6px solid blue;
width: 100px;
height: 100px;
cursor: pointer;
display: none;
}
img {border: 6px solid blue;
width: 100px;
height: 100px;
cursor: pointer;
}
</style>
</head>
<body>
<script>
function expand() {
var fruit_all = document.getElementsByClassName("Fruits");
var fruit = document.getElementsByTagName("fruit_all[0].img")
for (j = 0; j < fruit.length; j++) {
fruit[j].style.display = 'inline';
}
var replaced = document.getElementsByTagName("img");
replaced[0].style.display = 'none';
}
</script>
<h1>Fruit</h1>
<!--Generic Fruits image-->
<img src="https://wpcdn.us-east-1.vip.tn-cloud.net/www.hawaiimagazine.com/content/uploads/2020/12/exoticfruits-opener.jpg"
height="100" width="100" onclick="expand()">
<!--This is what replaces the Generic Fruits image-->
<div class="Fruits">
<img src="https://foodprint.org/wp-content/uploads/2018/10/IMG_3392-e1539129880189.jpg"
height="100" width="100">
<img src="https://foodprint.org/wp-content/uploads/2018/10/imageedit_127_5581342771.jpg"
height="100" width="100">
<img src="https://i0.wp.com/moodymoons.com/wp-content/uploads/2016/02/img_8986.jpg?fit=4560%2C3000&ssl=1"
height="100" width="100">
<img src="https://www.naturalhealth365.com/wp-content/uploads/2016/04/blueberries.jpg"
height="100" width="100">
<img src="https://th.bing.com/th/id/OIP.gBifOTB-F-wBTx3bzYPiGgHaE-?pid=ImgDet&rs=1"
height="100" width="100">
<img src="https://th.bing.com/th/id/OIP.3yrzbKoKIgyR7eBhHma26AHaGm?pid=ImgDet&rs=1"
height="100" width="100">
</div>
</body>
</html>I suspect there might be an issue with my expand() function. The aim is to target all elements under the .Fruits img class and change the display attribute to inline upon click. Although the initial generic fruits image disappears upon clicking, the subsequent 6 fruit images organized in a grid layout do not appear.