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

Question

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>

Answer 1

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.com/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.com/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.com/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.com/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.com/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.com/images?q=tbn:ANd9GcRXJA32WU4rBpx7maglqeEtt3ot1tPIRWptxA&s"
      height="390" />
  </div>
</div>