我的函数只运行一次

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>