What is preventing this code from successfully altering the opacity of an element based on its id?

Question

What is preventing this code from successfully altering the opacity of an element based on its id?

I'm curious as to why the element's opacity is not temporarily reduced when the corresponding button is pressed. Any assistance would be greatly appreciated.

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

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

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

<div id="epicenter">
  <img src="https://via.placeholder.com/45/000" alt="Black" id="black">
  <img src="https://via.placeholder.com/45/00f" alt="Blue" id="blue">
  <img src="https://via.placeholder.com/45/0f0" alt="Green" id="green">
  <img src="https://via.placeholder.com/45/ddd" alt="Grey" id="grey">
  <img src="https://via.placeholder.com/45/a0d" alt="Purple" id="purple">
  <img src="https://via.placeholder.com/45/e73" alt="Orange" id="orange">
  <img src="https://via.placeholder.com/45/f00" alt="Red" id="red">
  <img src="https://via.placeholder.com/45/ff0" alt="Yellow" id="yellow">
  <img src="https://via.placeholder.com/45/fcc" alt="Pink" id="pink">
</div>
<button onclick="fadeOutFadeIn('black')">black</button>
<button onclick="fadeOutFadeIn('blue')">blue</button>
<button onclick="fadeOutFadeIn('green')">green</button>
<button onclick="fadeOutFadeIn('grey')">grey</button>
<button onclick="fadeOutFadeIn('purple')">purple</button>
<button onclick="fadeOutFadeIn('orange')">orange</button>
<button onclick="fadeOutFadeIn('red')">red</button>
<button onclick="fadeOutFadeIn('yellow')">yellow</button>
<button onclick="fadeOutFadeIn('pink')">pink</button>

javascript html css opacity

Answer 1

Answer №1

In order to streamline your code and make it easier to maintain, I recommend using a single event listener instead of multiple ones. Utilizing classes over style tags is also advisable as it simplifies maintenance and facilitates transitions like css transitions. In this case, the items fade in and out smoothly.

Furthermore, I chose to implement setTimeout instead of a sleep function. According to a detailed explanation on Stack Overflow, using loops like while() can block code execution and cause performance issues. By using setTimeout or setInterval, you ensure asynchronous behavior and timely triggers for your functions.

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>

Answer 2

In order to streamline your code and make it easier to maintain, I recommend using a single event listener instead of multiple ones. Utilizing classes over style tags is also advisable as it simplifies maintenance and facilitates transitions like css transitions. In this case, the items fade in and out smoothly.

Furthermore, I chose to implement setTimeout instead of a sleep function. According to a detailed explanation on Stack Overflow, using loops like while() can block code execution and cause performance issues. By using setTimeout or setInterval, you ensure asynchronous behavior and timely triggers for your functions.

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>

What is preventing this code from successfully altering the opacity of an element based on its id?

Answer №1

Similar questions

Troubleshooting Autocomplete User Interface Problems

Ways to format the direct descendant of a multi-level list?

Concealing rows with empty cells in column E

allowing absolutely positioned region to expand

How to pass a String Array to a String literal in JavaScript

What is the best method to make a hyperlink within an IFrame open in a new window?

The inverse function for Ember Handlebars helper options is experiencing an undefined error

Manipulating the DOM by nesting an icon within a button element in HTML

How does the call method on array.prototype.includes work with arguments x and y?

Can we trust the security of this form?

A reliable approach for dynamically altering SVG graphics

relocate the image with an identical filename stored in the variable

Transform Objects Array from AJAX Response into a Distinct JSON Entity

JavaScript functions may become unresponsive following ajax loading with tables

Obtaining outcomes from all redux-saga operations, regardless of any potential failures

Enhancing an identity function with type hinting

Modifying the design of a website in real-time using the EXPRESS.js and NODE.js frameworks

What is the process for obtaining a custom slot in a v-data-iterator?

best way to sort through an array using jquery in javascript

Nuxt's axios is encountering difficulties in managing the server's response