Onclick only every other click

Question

The problem I have come up to is that the onclick function I have made in JavaScript only can be executed every other click on the button. This happened after adding this code (because I want to hide the class/div after x seconds):

popup.classList.toggle("show");
setTimeout(
function() {
popup.classList.toggle("hide");
}, 750);
}

So with other words, it works the first time clicking then when the class is shown for x seconds and when I am gonna click it again. Nothing happens, but on the next click it works. And this goes on and on and on. What can the problem?

I tried copying the code but it doesnt seem to work in jsfiddle as it did in the project. If someone could tell me whats the problem in this code and how to make it show the popup every time the button is clicked.

https://jsfiddle.net/xxuvwc1b/

function showpop() {
  var popup = document.getElementById("myPopup");
  popup.classList.toggle("show");
  setTimeout(
    function() {
      popup.classList.toggle("hide");
    }, 750);
}

.popup {
  background-color: black;
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-weight: bold;
  font-family: 'Raleway', sans-serif;
  font-size: 1em;
  text-decoration: none;
  color: green;
  float: left;
  border-radius: 5px;
  border: none;
  width: 100%;
}

:focus {
  outline: 0 !important;
}

.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}


/* Popup arrow */

.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

.popup .hide {
  visibility: hidden;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<button class="popup" onclick="showpop();"><span class="popuptext" id="myPopup">HERE I AM!</span>SHOW ME A POPUP</button>

The fiddle didn't work because of: https://stackoverflow.com/questions/5431351/simple-example-doesnt-work-on-jsfiddle — Barmar, Dec 22 '17 at 21:22

score 3 · Answer 1 · answered Dec 22 '17 at 21:06

3

You click on it and add the class show. Almost a second later, you add the class hide (it still has the class show).

You click on it again and you remove the class show. Almost a second later, you remove the class hide.

The next click adds both. The 4th removes both. And so on.

Use a single class and toggle that on and off.

answered Dec 22 '17 at 21:06

Quentin

914,110
126
1,211
1,335

I am new to javascript. May you help me how I would do this single class? – Dec 22 '17 at 21:09
Replace the word `hide` with `show`, or vice versa. (The rest comes down to your CSS). – Quentin Dec 22 '17 at 21:10
The class start as _hide_ so why would I _hide_ the _class_ again onClick before _show_ and there will be no _hide_ of it. I just want it to be shown at click for **x** seconds. – Dec 22 '17 at 21:15
You wouldn't hide it again. You are **toggling** it. Since it is there to start it, toggling it remove it (toggling it again almost a second later puts it back) – Quentin Dec 22 '17 at 21:17
_hide_ is visibility: hidden only, _show_ is visibility: visible only in css. Swapping those too as you said only made it reversed. Now the first click dont work, but the second one do and so on. – Dec 22 '17 at 21:22
@muhammed Don't use two classes. It's visible when it has `show`, and it's hidden when it doesn't have `show`. Then just toggle that class. – Barmar Dec 22 '17 at 21:24
Now I got that part thanks, but this make another problem that the timer will not work properly. It shows until other things is clicked and not on **x** seconds. – Dec 22 '17 at 21:27
Solved it by toggling show and removing hide in the setTimeout and after that function toggling hide and removing show. Thanks for all help! – Dec 22 '17 at 21:38

Onclick only every other click

1 Answers1