Quería crear una alerta de notificación cuando hago clic en algo. La primera notificación funciona, pero las siguientes no muestran la notificación en absoluto. Aquí está el código:
'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>En lugar de usar animaciones, puede diseñar los elementos usando JS y 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>