Script to display opacity not working after next attempts-CodePudding

I wanted to create a notification alert when I click something. The first notification works but the succeeding do not show the notification at all. Here is the code:

'use strict';

window.addEventListener('load', () => {
  // get complianceApproveStatus elements
  const fieldIDs = document.querySelectorAll('.field-id');

  const copiedAlert = document.createElement("span");
  copiedAlert.id = 'tooltiptext';

  copiedAlert.innerHTML = 'Copied!';

  document.body.appendChild(copiedAlert);

  const displayAlert = () => {
    copiedAlert.style.opacity = 1;
  }

  fieldIDs.forEach(fieldID => {

    fieldID.addEventListener('click', () => {
      displayAlert();
      navigator.clipboard.writeText(fieldID.textContent);
    });
  });
});

.field-id {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  margin: 5rem;
}

.field-id:hover {
  cursor: pointer;
}


/* Tooltip text */

#tooltiptext {
  opacity: 0;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px;
  border-radius: 6px;
  position: fixed;
  bottom: 20px;
  right: 70px;
}

#tooltiptext {
  -moz-animation: cssAnimation 0s ease-in 5s forwards;
  /* Firefox */
  -webkit-animation: cssAnimation 0s ease-in 5s forwards;
  /* Safari and Chrome */
  -o-animation: cssAnimation 0s ease-in 5s forwards;
  /* Opera */
  animation: cssAnimation 0s ease-in 5s forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@keyframes cssAnimation {
  to {
    opacity: 0;
  }
}

@-webkit-keyframes cssAnimation {
  to {
    opacity: 0;
  }
}

<span class='field-id'>click 1</span>
<span class='field-id'>click 2</span>
<span class='field-id'>click 3</span>
<span class='field-id'>click 4</span>

CodePudding user response：

Instead of using animations, you can just style the elements using JS and setTimeout.

'use strict';

window.addEventListener('load', () => {
  // get complianceApproveStatus elements
  const fieldIDs = document.querySelectorAll('.field-id');

  const copiedAlert = document.createElement("span");
  copiedAlert.id = 'tooltiptext';

  copiedAlert.innerHTML = 'Copied!';

  document.body.appendChild(copiedAlert);

  const displayAlert = () => {
    if (copiedAlert.style.opacity === "" || copiedAlert.style.opacity === "0") {
      copiedAlert.style.opacity = 1;
      setTimeout(() => copiedAlert.style.opacity = 0, 5000);
    }
  }

  fieldIDs.forEach(fieldID => {

    fieldID.addEventListener('click', () => {
      displayAlert();
      navigator.clipboard.writeText(fieldID.textContent);
    });
  });
});

.field-id {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  margin: 5rem;
}

.field-id:hover {
  cursor: pointer;
}


/* Tooltip text */

#tooltiptext {
  opacity: 0;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px;
  border-radius: 6px;
  position: fixed;
  bottom: 20px;
  right: 70px;
}

<span class='field-id'>click 1</span>
<span class='field-id'>click 2</span>
<span class='field-id'>click 3</span>
<span class='field-id'>click 4</span>