我的函數只運行一次

Question

我希望按鈕將文本區域中的文本剪切到剪貼板，並且每次單擊按鈕時按鈕都會同時旋轉。 我可以使用它，但是它只能旋轉一次，下次單擊它時，它將剪切文本，但按鈕不會旋轉。

HTML我的按鈕和文本區域

<div class="box-2-wrap">

<textarea class="out-put"></textarea>

<button type="button" id="copyEmailsButton" onclick="copyEmails()">Copy Emails</button>

</div>

CSS我的樣式表

.box-2-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 0px solid #333;
}
.box-2-wrap textarea {
    flex:1;
    padding: 4%;
    overflow-y: auto;
    background-color: #333;
    color: gold;
    max-width: 100%;
    min-width: 100%;
    font-size: 110%;
    border: none;
    border-radius: 8px;
}
.box-2-wrap button {
    align-items: flex-end;
    justify-content: center;
    padding: 10px 2%;
    width: 50%;
    margin: 6% auto;
    background-color: #178E44;
    color: white;
    font-size: 120%;
    border: none;
    border-radius: 4px;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(360deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

JS我的JavaScript

function unSelectAll(){
        var output = document.getElementsByClassName("out-put")[0];
            output.innerHTML = "";
    }
}

function copyEmails(){
    var output = document.getElementsByClassName("out-put")[0];
        output.select();
        document.execCommand('copy');
        unSelectAll();
    var copyEmailsButton = document.getElementById("copyEmailsButton");

    if (copyEmailsButton.style.animation !== "rotate 1s") {
        copyEmailsButton.style.animation = "rotate 1s";
    }else{
        copyEmailsButton.style.animation = "none";
    }
}

Answer 1

在您指定的copyEmails的if-else塊中，如果未將動畫樣式設置為“旋轉1秒”，則按鈕將旋轉一秒鍾。 但是，如果是，它將僅將動畫樣式設置為none。

如果您第三次單擊該按鈕，您將發現它會再次旋轉。 這是因為第二次單擊后，您將動畫樣式再次設置為“無”。

這意味着，您的按鈕每2次點擊就會切換和旋轉一次！

要使按鈕在每次單擊時都旋轉，請將if-else塊更改為：

copyEmailsButton.style.animation = "rotate 1s";
setTimeout(function() {
copyEmailsButton.style.animation = "none" 
}, 1000);

每次單擊按鈕后，動畫完成后，動畫樣式將再次設置為無。

Answer 2

1您的unselctAll函數存在錯誤，應刪除一個額外的}

2在下一次單擊之前重置按鈕樣式，如下例所示

 function unSelectAll(){ var output = document.getElementsByClassName("out-put")[0]; output.innerHTML = ""; } function copyEmails(){ var output = document.getElementsByClassName("out-put")[0]; output.select(); document.execCommand('copy'); unSelectAll(); var copyEmailsButton = document.getElementById("copyEmailsButton"); if (copyEmailsButton.style.animation !== "rotate 1s") { copyEmailsButton.style.animation = "rotate 1s"; }else{ copyEmailsButton.style.animation = "none"; } } 

 .box-2-wrap { width: 100%; height: 100%; display: flex; flex-direction: column; border: 0px solid #333; } .box-2-wrap textarea { flex:1; padding: 4%; overflow-y: auto; background-color: #333; color: gold; max-width: 100%; min-width: 100%; font-size: 110%; border: none; border-radius: 8px; } .box-2-wrap button { align-items: flex-end; justify-content: center; padding: 10px 2%; width: 50%; margin: 6% auto; background-color: #178E44; color: white; font-size: 120%; border: none; border-radius: 4px; } @keyframes rotate { 0% { transform: rotate(0deg); } 50% { transform: rotate(360deg); } 100% { transform: rotate(0deg); } } 

 <textarea class="out-put" onmouseover="copyEmailsButton.style.animation = 'none';" placeholder="always click here before clicking the button"></textarea> <button type="button" id="copyEmailsButton" onclick="copyEmails()">Copy Emails</button> </div>