Why isn't my js function for setting the css display attribute to inline for an img tag working-CodePudding

Aim: I am trying to create a webpage that has a generic image of fruits. When someone clicks on it, the fruits image gets replaced by 6 images of different types of fruits (like apples, orange, bananas, etc.). There are 3 images per row (so, total, 2 rows of fruit pictures). Here is my code 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 >
<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,3000&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'm pretty sure that the problem lies in my expand() function. What I'm trying to do is get all elements of type .Fruits img (so, the img tag is nested in the Fruits class). Then, I change the display attribute to inline.

On clicking, the generic fruits image does disappear, however, the 6 images of the fruits (2rows, 3 columns) do not appear.

CodePudding user response：

maybe like this:

function expand() {
  var cls_fruits_div = document.getElementsByClassName('Fruits')[0];
  cls_fruits_div.style.display = 'block';
  var first_img = document.getElementsByTagName('img')[0];
  first_img.style.display = 'none';
}
function select(el){
 var new_img = el.src;
 var first_img = document.getElementsByTagName('img')[0];
 first_img.src =  new_img;
 first_img.style.display = 'inline-block';
 var cls_fruits_div = document.getElementsByClassName('Fruits')[0];
 cls_fruits_div.style.display = 'none';
}

img {
  border: 6px solid blue;
  width: 100px;
  height: 100px;
  cursor: pointer;
}
.Fruits{
  display: none;
}

<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" onclick="expand();">

<!--This is what replaces the Generic Fruits image-->
<div >
  <img src="https://foodprint.org/wp-content/uploads/2018/10/IMG_3392-e1539129880189.jpg" onclick="select(this);">
  <img src="https://foodprint.org/wp-content/uploads/2018/10/imageedit_127_5581342771.jpg" onclick="select(this);">
  <img src="https://i0.wp.com/moodymoons.com/wp-content/uploads/2016/02/img_8986.jpg?fit=4560,3000&ssl=1" onclick="select(this);">
  <br>
  <img src="https://www.naturalhealth365.com/wp-content/uploads/2016/04/blueberries.jpg" onclick="select(this);">
  <img src="https://th.bing.com/th/id/OIP.gBifOTB-F-wBTx3bzYPiGgHaE-?pid=ImgDet&rs=1" onclick="select(this);">
  <img src="https://th.bing.com/th/id/OIP.3yrzbKoKIgyR7eBhHma26AHaGm?pid=ImgDet&rs=1" onclick="select(this);">
</div>