PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Wednesday, November 9, 2022

[FIXED] Why isn't my js function for setting the css display attribute to inline for an img tag working?

 November 09, 2022     css, html, javascript     No comments   

Issue

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 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'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.


Solution

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 class="Fruits">
  <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%2C3000&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>



Answered By - mscdeveloper
Answer Checked By - Gilberto Lyons (PHPFixing Admin)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing