在一个函数中来回更改 id

Question

这是一个抛硬币的页面的一部分 我根据硬币的当前状态和未来状态在css上制作了硬币的动画 因此，每次运行该功能时，我都必须将硬币重置回默认状态，然后使用新的 CSS 动画将其设置为未来状态 问题是..当我运行代码时它没有工作，直到我添加了警报（“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

问题可能是在您设置 Id 和调用 getElementById 之间浏览器尚未重新渲染 DOM。

当您提醒某些内容时，浏览器可能会触发渲染。

可能有更好的方法来处理您正在尝试做的事情，但为了解决 DOM 未重新呈现的直接问题，您可以将警报之后的所有内容放在一个新的匿名函数中，该函数由设置超时。有点像：

SetTimeout (function() {...},100)。您必须正确设置变量范围，但这应该给 DOM 一个更新的机会。