在一個函數中來回更改id

Question

這是翻頁硬幣類的一部分，我根據硬幣的當前狀態和未來狀態在css上制作了硬幣動畫，因此每次運行該功能時，我都必須將硬幣重置為默認狀態，然后使用新的CSS動畫將其設置為將來的狀態。.當我運行代碼時，直到我添加了alert（“ hi”）行，它才起作用。.我不知道為什么，我想修復這是因為我不希望用戶每次需要擲硬幣時都單擊“確定”

var flipCoin = function () {
flips ++;
var result = 1;
if (document.getElementById("fromHeadsToHeads") !== null) {
document.getElementById("fromHeadsToHeads").id = "defaultHeads";
}

switch (result) {
    case 1 :

        if (document.getElementById("defaultHeads") !== null) {
            alert("hi")
            document.getElementById("numFlips").innerHTML = flips;
            document.getElementById("defaultHeads").id = "fromHeadsToHeads";
        }
    break;
}

Answer 1

問題可能出在您設置I和調用getElementById之間，瀏覽器尚未重新渲染DOM。

當您發出警報時，瀏覽器可能會觸發渲染。

可能有更好的方法來進行操作，但是要解決不重新呈現DOM的直接問題，您可以將警報后的所有內容放入由setTimeout調用的新匿名函數中。 有點像：

SetTimeout（function（）{...}，100）。 您將必須正確確定變量作用域，但這應該給DOM一個被更新的機會。