why is this code not able to change the opacity of an element by its id

Question

I am wondering why the opacity for the element is not temporary reduced when the appropriate button is pressed. Thanks for your help.

function sleep(miliseconds) {
  var currentTime = new Date().getTime();

  while (currentTime + miliseconds >= new Date().getTime()) {}
}

function temporarHide(ev) {
  document.getElementById(ev).style.opacity = '0.16';
  sleep(1500);
  document.getElementById(ev).style.opacity = '1';
}

<div id="epicenter">
  <img src="https://via.placeholder.com/45/000" alt="Schwarz" id="black">
  <img src="https://via.placeholder.com/45/00f" alt="Blau" id="blue">
  <img src="https://via.placeholder.com/45/0f0" alt="Grün" id="green">
  <img src="https://via.placeholder.com/45/ddd" alt="Grau" id="grey">
  <img src="https://via.placeholder.com/45/a0d" alt="Lila" id="lila">
  <img src="https://via.placeholder.com/45/e73" alt="Orange" id="orange">
  <img src="https://via.placeholder.com/45/f00" alt="Rot" id="red">
  <img src="https://via.placeholder.com/45/ff0" alt="Gelb" id="yellow">
  <img src="https://via.placeholder.com/45/fcc" alt="Rosa" id="rosa">
</div>
<button onclick="temporarHide('black')">black</button>
<button onclick="temporarHide('blue')">blue</button>
<button onclick="temporarHide('green')">green</button>
<button onclick="temporarHide('grey')">grey</button>
<button onclick="temporarHide('lila')">lila</button>
<button onclick="temporarHide('orange')">orange</button>
<button onclick="temporarHide('red')">red</button>
<button onclick="temporarHide('yellow')">yellow</button>
<button onclick="temporarHide('rosa')">rosa</button>

Kinglish · Answer 1 · 2021-07-13T16:43:00.233

I would suggest using a single event listener, rather than individual ones - easier to maintain and less code. I also suggest using classes rather than style tags. Again, easier to maintain, but also makes things like css transitions easier. Here, the items fade in and fade out.

Finally, I opted for setTimeout rather than your sleep function. setTimeout is the right tool for this job. As this S.O. post discusses, while() (and other) loops block code execution and continuously run until complete. This is bad for performance in general. It probably won't crash the browser with this particular use-case, but it's good to stick with best practices. setTimeout and setInterval run async and trigger only when complete.

window.addEventListener('DOMContentLoaded', () => {

  // one click-event listener to rule them all
  document.addEventListener('click', e => {

    // testing to make sure the item clicked is a button and is in the 
    // <div class='color-b'> element
    if (e.target.tagName === 'BUTTON' && e.target.closest('.color-b')) {
      let ev = e.target.innerText.trim() // get the id directly from the button text
      document.getElementById(ev).classList.add('dim');
      setTimeout(() => document.getElementById(ev).classList.remove('dim'), 1500);
    }
  })
})

img {
  transition: opacity 1s;
  width: 58px;
}

button {
  width: 58px;
}

.dim {
  opacity: 0.16;
}

<div id="epicenter">
  <img src="https://via.placeholder.com/65/000" alt="Schwarz" id="black">
  <img src="https://via.placeholder.com/65/00f" alt="Blau" id="blue">
  <img src="https://via.placeholder.com/65/0f0" alt="Grün" id="green">
  <img src="https://via.placeholder.com/65/ddd" alt="Grau" id="grey">
  <img src="https://via.placeholder.com/65/a0d" alt="Lila" id="lila">
  <img src="https://via.placeholder.com/65/e73" alt="Orange" id="orange">
  <img src="https://via.placeholder.com/65/f00" alt="Rot" id="red">
  <img src="https://via.placeholder.com/65/ff0" alt="Gelb" id="yellow">
  <img src="https://via.placeholder.com/65/fcc" alt="Rosa" id="rosa">
</div>
<div class='color-b'>
  <button>black</button>
  <button>blue</button>
  <button>green</button>
  <button>grey</button>
  <button>lila</button>
  <button>orange</button>
  <button>red</button>
  <button>yellow</button>
  <button>rosa</button>
</div>

why is this code not able to change the opacity of an element by its id

1 Answers1