Html - Darkening an image when clicked is requiring an initial click on that image, and I don't know why

Sintoxin
September 26, 2024
39 views
3 votes
3 Answers

I’m trying to make an item tracker for a game as a webapp. I wanted to have the icon of each item displayed in a grid, and when you click on the image it darkens to indicate that you’ve gotten it. So far I’ve only figured out how to affect the opacity of the images, but works well enough for now. Though when the opacity starts at 1.0, it requires a second click to activate, but only for the first time. After that it works as intended, toggling on click. If I set the initial opacity to 0.5, it works on the first click.

I made a table to place the images in a grid (added 8 for the time being) and gave each one a unique id, and the class "Loot" like so:

function lootDarken(x) {
  image = document.getElementById(x);
  if (image.style.opacity === "1") {
    image.style.opacity = "0.5";
  } else {
    image.style.opacity = "1";
  }
}

<table>
  <tr>
    <td><img onClick="lootDarken('Loot1')" id="Loot1" class="Loot" src="https://picsum.photos/200/300"></td>
    <td><img onClick="lootDarken('Loot2')" id="Loot2" class="Loot" src="https://picsum.photos/200/300"></td>
    <td><img onClick="lootDarken('Loot3')" id="Loot3" class="Loot" src="https://picsum.photos/200/300"></td>
    <td><img onClick="lootDarken('Loot4')" id="Loot4" class="Loot" src="https://picsum.photos/200/300"></td>
    <td><img onClick="lootDarken('Loot5')" id="Loot5" class="Loot" src="https://picsum.photos/200/300"></td>
    <td><img onClick="lootDarken('Loot6')" id="Loot6" class="Loot" src="https://picsum.photos/200/300"></td>
    <td><img onClick="lootDarken('Loot7')" id="Loot7" class="Loot" src="https://picsum.photos/200/300"></td>
    <td><img onClick="lootDarken('Loot8')" id="Loot8" class="Loot" src="https://picsum.photos/200/300"></td>
  </tr>
</table>

Also, if there’s a cleaner/easier way to place these images in a grid, please share. I have to go through hundreds of these.

I thought maybe it was because the opacity wasn’t officially set, and that clicking it the first only set the opacity to 1 since technically, the opacity wasn’t 1. So I added the class "Loot" in order to set the opacity on startup. That didn’t work, so I tried setting the initial opacity to 0.5 just to see what would happen and that worked wonderfully.

I also tried reversing the function, making it check if the opacity is not 1:

function lootDarken(x) {
    
    image = document.getElementById(x);
    if (image.style.opacity != "1") {
        image.style.opacity = "1";
    } else {
        image.style.opacity = "0.5";
    }
    
}

But that led to the same result. I don’t even know what is happening that’s causing this weird interaction, so I came here hoping for an explanation… and maybe tips on how to make it less repetitive.

Answers

The problem with the original snippet is that image.style.opacity is not set initially:

const img = document.querySelector('img');
img.onclick = function() {
  console.log('Opacity:'+this.style.opacity);
  console.log(this.style.opacity == '' ? 1 : 0);
}

<img src="https://picsum.photos/200/300">

You can solve your problem by adjusting the if-statement:

function lootDarken(x) {
  image = document.getElementById(x);
  if (image.style.opacity === "1" || image.style.opacity === "") {
    image.style.opacity = "0.5";
  } else {
    image.style.opacity = "1";
  }
}

function lootDarken(x) {
  image = document.getElementById(x);
  if (image.style.opacity === "1" || image.style.opacity === "") {
    image.style.opacity = "0.5";
  } else {
    image.style.opacity = "1";
  }
}

<table>
  <tr>
    <td><img onClick="lootDarken('Loot1')" id="Loot1" class="Loot" src="https://picsum.photos/200/300"></td>
    <td><img onClick="lootDarken('Loot2')" id="Loot2" class="Loot" src="https://picsum.photos/200/300"></td>
    <td><img onClick="lootDarken('Loot3')" id="Loot3" class="Loot" src="https://picsum.photos/200/300"></td>
    <td><img onClick="lootDarken('Loot4')" id="Loot4" class="Loot" src="https://picsum.photos/200/300"></td>
    <td><img onClick="lootDarken('Loot5')" id="Loot5" class="Loot" src="https://picsum.photos/200/300"></td>
    <td><img onClick="lootDarken('Loot6')" id="Loot6" class="Loot" src="https://picsum.photos/200/300"></td>
    <td><img onClick="lootDarken('Loot7')" id="Loot7" class="Loot" src="https://picsum.photos/200/300"></td>
    <td><img onClick="lootDarken('Loot8')" id="Loot8" class="Loot" src="https://picsum.photos/200/300"></td>
  </tr>
</table>

Instead of trying to modify the opacity with the style attribute, you could also toggle a class which lowers the opacity. By doing so you can also add a CSS transition to the effect

const loots = document.querySelectorAll('img.Loot');

loots.forEach(function(loot, index) {
  loot.onclick = function() {
    this.classList.toggle('dark');
  };
});

img.Loot {
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

img.Loot.dark {
  opacity: 0.5;
}

<table>
  <tr>
    <td><img id="Loot1" class="Loot" src="https://picsum.photos/200/300"></td>
    <td><img id="Loot2" class="Loot" src="https://picsum.photos/200/300"></td>
    <td><img id="Loot3" class="Loot" src="https://picsum.photos/200/300"></td>
    <td><img id="Loot4" class="Loot" src="https://picsum.photos/200/300"></td>
    <td><img id="Loot5" class="Loot" src="https://picsum.photos/200/300"></td>
    <td><img id="Loot6" class="Loot" src="https://picsum.photos/200/300"></td>
    <td><img id="Loot7" class="Loot" src="https://picsum.photos/200/300"></td>
    <td><img id="Loot8" class="Loot" src="https://picsum.photos/200/300"></td>
  </tr>
</table>

Because element.style refers to the inline style of the element, not computed style.

To get around this, either assign all images with an initial inline opacity, or check their live style instead.

// --- Option 1: Check for inline style ---
function lootDarken(x) {
  image = document.getElementById(x);
  if (image.style.opacity === "1") {
    image.style.opacity = "0.5";
  } else {
    image.style.opacity = "1";
  }
}
// --- Option 2: Check for computed style ---
function lootDarken2(x) {
  const image = document.getElementById(x);
  const style = window.getComputedStyle(image);
  if (style.opacity === "1") {
    image.style.opacity = "0.5";
  } else {
    image.style.opacity = "1";
  }
}
// --- Option 1.2: You can also set inline style programmatically ---
document.addEventListener("DOMContentLoaded", () => {
  document.querySelectorAll('img[id^="Loot"]').forEach((img) => {
    img.style.opacity = "1";
  });
});

<table>
  <tr>
    <!-- Option 1.1: You can add inline style by hand -->
    <td><img onClick="lootDarken('Loot1')" id="Loot1" class="Loot" src="https://picsum.photos/200/300" style="opacity:1"></td>
    <!-- Option 2: Or use computed style instead -->
    <td><img onClick="lootDarken2('Loot2')" id="Loot2" class="Loot" src="https://picsum.photos/200/300"></td>
    <td><img onClick="lootDarken('Loot3')" id="Loot3" class="Loot" src="https://picsum.photos/200/300"></td>
    <td><img onClick="lootDarken('Loot4')" id="Loot4" class="Loot" src="https://picsum.photos/200/300"></td>
    <td><img onClick="lootDarken('Loot5')" id="Loot5" class="Loot" src="https://picsum.photos/200/300"></td>
    <td><img onClick="lootDarken('Loot6')" id="Loot6" class="Loot" src="https://picsum.photos/200/300"></td>
    <td><img onClick="lootDarken('Loot7')" id="Loot7" class="Loot" src="https://picsum.photos/200/300"></td>
    <td><img onClick="lootDarken('Loot8')" id="Loot8" class="Loot" src="https://picsum.photos/200/300"></td>
  </tr>
</table>

Please use the code below:

    function lootDarken(id) {
      const image = document.getElementById(id);
      image.classList.toggle('clk-collect');
    }

    .img-sec {
      opacity: 1;
      transition: opacity 0.3s ease;
    }
    .clk-collect {
      opacity: 0.5;
    }
    .grid-wrapper {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
    }
    img {
      width: 100%;
      height: auto;
    }

<div class="grid-wrapper">
    <img onClick="lootDarken('Loot1')" id="Loot1" class="img-sec" src="https://picsum.photos/200/300">
    <img onClick="lootDarken('Loot2')" id="Loot2" class="img-sec" src="https://picsum.photos/200/300">
    <img onClick="lootDarken('Loot3')" id="Loot3" class="img-sec" src="https://picsum.photos/200/300">
    <img onClick="lootDarken('Loot4')" id="Loot4" class="img-sec" src="https://picsum.photos/200/300">
    <img onClick="lootDarken('Loot5')" id="Loot5" class="img-sec" src="https://picsum.photos/200/300">
    <img onClick="lootDarken('Loot6')" id="Loot6" class="img-sec" src="https://picsum.photos/200/300">
    <img onClick="lootDarken('Loot7')" id="Loot7" class="img-sec" src="https://picsum.photos/200/300">
    <img onClick="lootDarken('Loot8')" id="Loot8" class="img-sec" src="https://picsum.photos/200/300">
  </div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Darkening an image when clicked is requiring an initial click on that image, and I don't know why

Answers