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

admin管理员组

文章数量:1516870

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>

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>

• javascript
• html
• css

Share Follow edited 8 hours ago Madison Ellis asked 11 hours ago Madison EllisMadison Ellis 1322 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. 4

• 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>

本文标签：