on click, image change. image disappearing instead of appearing (javascript, html, css)

i'm trying to make it so when you click on image 1, image 2 appears. Right now image 2 is always visible and if you click on image 1, image 2 disappears. also image 2 wont let me change it's position but image 1 will??.

var barImage = document.querySelector('#bartender img');
barImage.onclick = function() {
  var drinkImage = document.querySelector('#drink img');
  if(barImage.style.display = 'none') {
    (drinkImage.style.display = 'visible');
  } else {
    drinkImage.setAttribute (drinkImage.style.display = 'none');
  } 
}

#bartender { 
   position: absolute; 
   top: 20.5px; 
   left: 743px; 
   } 
   
#drink { 
   position: absolute; 
   top: 100px;
   left: 100px; 
   }

<div id="bartender">
  <img src="intro/Untitled1095_20250217004721.png" height="390">
</div>

<div id="drink">
  <img src="intro/Untitled1098_20250217153316.png" height="100">
</div>

var barImage = document.querySelector('#bartender img');
barImage.onclick = function() {
  var drinkImage = document.querySelector('#drink img');
  if(barImage.style.display = 'none') {
    (drinkImage.style.display = 'visible');
  } else {
    drinkImage.setAttribute (drinkImage.style.display = 'none');
  } 
}

#bartender { 
   position: absolute; 
   top: 20.5px; 
   left: 743px; 
   } 
   
#drink { 
   position: absolute; 
   top: 100px;
   left: 100px; 
   }

<div id="bartender">
  <img src="intro/Untitled1095_20250217004721.png" height="390">
</div>

<div id="drink">
  <img src="intro/Untitled1098_20250217153316.png" height="100">
</div>

Share edited 8 hours ago asked 11 hours ago Madison Ellis 132 bronze badges New contributor Madison Ellis is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

1 if(barImage.style.display = 'none') needs double equals == – James Commented 11 hours ago
myImage isn't defined. – Zishan Neno Commented 10 hours ago
Do you want the drinkImage to disappear and appear when you click on the barImage? – Lukinator Commented 10 hours ago
i added "==" & defined "myimage" and it didn't alter the outcome. i want the drinkimage to appear when i click the barimage, i don't really care if it disappears when you click the barimage again – Madison Ellis Commented 10 hours ago

Add a comment |

1 Answer 1

Sorted by: Reset to default 2

So if I understand correctly you have two images, whenever you click image1 you want to hide image2, let's first point out multiple issues you've made.

1- if(barImage.style.display = 'none') you are checking the visibility of barImage which is not changeable as per your code, then depending on that you want to change the visibility of drinkImage, that does not make any sense.

2- CSS display property doesn't have a value called visible, it's either block, flex, inline-block etc...

3- drinkImage.setAttribute(drinkImage.style.display = 'none'); this is invalid javascript code, Read more about setAttribute on MDN.

4- using var is not preferred, use const or let.

Now back to your question, here is the updated version of your code:

const barImage = document.querySelector('#bartender img');
barImage.onclick = function() {
  const drinkImage = document.querySelector('#drink img');
  if(drinkImage.style.display == 'none') {
    drinkImage.style.display = 'block'
  } else {
    drinkImage.style.display = 'none'
  } 
}

#bartender {
  position: absolute;
  top: 20.5px;
  left: 743px;
}

#drink {
  position: absolute;
  top: 100px;
  left: 100px;
}

<div id="drink">
  <img
    src="https://static.vecteezy/system/resources/thumbnails/036/324/708/small/ai-generated-picture-of-a-tiger-walking-in-the-forest-photo.jpg"
    height="100"
  />
</div>
<div id="bartender">
  <img
    src="https://encrypted-tbn0.gstatic/images?q=tbn:ANd9GcRXJA32WU4rBpx7maglqeEtt3ot1tPIRWptxA&s"
    height="390"
  />
</div>

This will let you toggle the image to show/hide whenever clicking on the other image.

if you want the image to start hidden and then show it when you click the other one, here is the updated version:

const barImage = document.querySelector('#bartender img');
barImage.onclick = function() {
  document.querySelector('#drink img').style.display = 'block';
}

#bartender {
  position: absolute;
  top: 20.5px;
  left: 743px;
}

#drink {
  position: absolute;
  top: 100px;
  left: 100px;
}

#drink img {
  display: none;
}

<div id="drink">
  <img
    src="https://static.vecteezy/system/resources/thumbnails/036/324/708/small/ai-generated-picture-of-a-tiger-walking-in-the-forest-photo.jpg"
    height="100"
  />
</div>
<div id="bartender">
  <img
    src="https://encrypted-tbn0.gstatic/images?q=tbn:ANd9GcRXJA32WU4rBpx7maglqeEtt3ot1tPIRWptxA&s"
    height="390"
  />
</div>

Bonus

I really encourage you to use CSS grid or flex instead of doing position: absolute.

const barImage = document.querySelector('#bartender img');
barImage.onclick = function() {
  const drinkImage = document.querySelector('#drink img');
  if(drinkImage.style.visibility == 'hidden') {
    drinkImage.style.visibility = 'visible'
  } else {
    drinkImage.style.visibility = 'hidden'
  } 
}

.grid-container {
  display: grid;
  grid-template-columns: auto auto;
}

<div class="grid-container">
  <div id="drink">
    <img
      src="https://static.vecteezy/system/resources/thumbnails/036/324/708/small/ai-generated-picture-of-a-tiger-walking-in-the-forest-photo.jpg"
      height="100" />
  </div>
  <div id="bartender">
    <img
      src="https://encrypted-tbn0.gstatic/images?q=tbn:ANd9GcRXJA32WU4rBpx7maglqeEtt3ot1tPIRWptxA&s"
      height="390" />
  </div>
</div>

Update

As OP asked to put multiple images instead of one image, you can add an array of image sources and on each click you pick different source.

I made it randomly but you can uncomment/comment some parts to make it show/hide in order.

const barImage = document.querySelector('#bartender img');
const images = ['https://cdn-icons-png.freepik/256/5323/5323572.png?semt=ais_hybrid', 'https://ps.w./shortpixel-image-optimiser/assets/icon-256x256.png?rev=1038819', 'https://play-lh.googleusercontent/rV5ySn37t1uao9pSk9GeW3nTC4SvJYqBB-VX3m52oHM3KZlXPvfR_GW4SkizLg60XM4=s256-rw', 'https://pngimg/d/lion_king_PNG30.png'];
// uncomment below code if you want to loop throgh images by order
// let imgIndex = 0;
barImage.onclick = function() {
  // comment below line if you want to show images in order
  const randomNum = Math.floor(Math.random() * images.length)
  const drinkImage = document.querySelector('#drink img');
  if(drinkImage.style.visibility == 'hidden') {
    drinkImage.style.visibility = 'visible';
  } else {
    drinkImage.style.visibility = 'hidden';
    drinkImage.src = images[randomNum]; // images[imgIndex] if you want it in order
    // uncomment below code if you want to loop throgh images by order
    // if (imgIndex < images.length -1) imgIndex++;
    // else imgIndex = 0;
  } 
}

.grid-container {
  display: grid;
  grid-template-columns: auto auto;
}

<div class="grid-container">
  <div id="drink">
    <img
      src="https://pngimg/d/lion_king_PNG30.png"
      height="100" />
  </div>
  <div id="bartender">
    <img
      src="https://encrypted-tbn0.gstatic/images?q=tbn:ANd9GcRXJA32WU4rBpx7maglqeEtt3ot1tPIRWptxA&s"
      height="390" />
  </div>
</div>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

on click, image change. image disappearing instead of appearing (javascript, html, css) - Stack Overflow

1 Answer 1

Bonus

Update

与本文相关的文章

评论列表(0)