クリックだけオンクリック

Question

私が問題になったのは、私がJavaScriptで行ったonclick機能はボタンを1回クリックするだけで実行できるということです。

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

だから、他の言葉で、それはクラスをx秒間表示されたときにクリックする初めての作品とするとき：これは（私がx秒後にクラス/ DIVを非表示にしたいので）、このコードを追加した後に起こりました私は再びそれをクリックするつもりです。何も起こりませんが、次のクリックでうまくいきます。そして、これはどんどん進んでいきます。問題は何ができますか？

私はコードをコピーしようとしましたが、プロジェクトで行ったようにjsfiddleで動作しないようです。誰かが私にこのコードの問題点とそのボタンがクリックされるたびにポップアップを表示する方法を教えてもらえれば。

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>

Answer 1

あなたはそれをクリックし、クラスshowを追加します。ほぼ1秒後に、クラスhideを追加します（クラスはまだshowです）。

クラスshowをもう一度クリックしてください。ほぼ1秒後に、はクラスhideを削除します。

次回クリックすると両方が追加されます。 4回目は両方を削除します。等々。

---

単一クラスを使用して、そのオンとオフを切り替えます。