Javascript Question posted in
A very good W3school tutorial can be found here.

Click button once to have text appear and fade instead of clicking twice? (html, css, javascript)

As this code is now, I must press twice to have the text appear and fade.

How can I press the button only once to have the "Added!" text appear and fade? I would like this to happen for every time I click the button (even if the user clicks WHILE the text is fading, it should start from fully visible to fading).

I have tried focus with CSS. I have also tried rearranging javascript code, as well as inserting a while loop in the javascript, but I must be doing something wrong.

Thanks

  function cartAdded() {
    var text = document.getElementById("added-notification");
    if (text.style.display === "none") {
      text.style.display = "block";
    } else {
      text.style.display = "none";
    }
  }
  .added-fade-out {
    opacity: 0;
    display: none;
    animation: fadeOut 1s ease-out;

  }

  @keyframes fadeOut {
    0% {
      opacity: 1;
      display: none;
    }

    50% {
      opacity: 0.5;
      display: block;
    }

    100% {
      opacity: 0;
      display: none;
    }
  }
  <button type='button' onclick="cartAdded()">Click me</button>
  <p id='added-notification' class="added-fade-out">Added!</p>
Tags:

2

Answers


  1. 0

    You have to explicitly set the display property to none initially. Otherwise, text.style.display will return an empty string.

    var text = document.getElementById("added-notification");
text.addEventListener('animationend', () => {
  text.style.display = "none"
})

function cartAdded() {
  if (text.style.display === "none") {
    text.style.display = "block";
  } else {
    text.style.display = "none";
  }
}
    .added-fade-out {
  opacity: 0;
  display: none;
  animation: fadeOut 1s ease-out;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
    <button type='button' onclick="cartAdded()">Click me</button>
<p id='added-notification' class="added-fade-out" style="display: none">Added!</p>
    Login or Signup to reply.
  2. 0

    you need to use animationend event to remove your fade Out

    const
  notificationButton = document.querySelector('#notification-btn')
, pNotificationText  = document.querySelector('#notification-text')
  ;

notificationButton.addEventListener('click', () =>
  {
  notificationButton.disabled = true;
  pNotificationText.classList.replace('noDisplay','show-fade-out')
  })
pNotificationText.addEventListener('animationend', () =>
  {
  notificationButton.disabled = false;
  pNotificationText.classList.replace('show-fade-out','noDisplay') 
  })
    .noDisplay {
  display: none;
  }
.show-fade-out {
  animation: fadeOut 1s ease-out forwards;
  }
@keyframes fadeOut {
  100% { opacity: 0; }
  }
    <button id="notification-btn">Click me</button>
<p id='notification-text' class="noDisplay" > Added! </p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search