如何通过HTML按钮点击暂停CSS动画？现有JS实现无效果求排查

现有代码存在3个核心问题导致功能失效，对应调整方案如下：

• 错误使用animationPlayState的写法：animationPlayState是CSS样式属性，不是可调用方法，不能用括号传参的方式赋值，需要修改为赋值语句。
• 无效的判断条件：原生DOM按钮对象不存在内置的clicked属性，该判断条件永远返回false，内部代码不会执行。
• 缺少事件绑定：pauseAnimation函数未绑定到按钮的点击事件，点击按钮时函数不会触发。

修复后的参考代码 #

var sun = document.getElementById("sun");
var sky = document.getElementById("sky");
var pauseBtn = document.getElementById("pauseBtn");

// 绑定点击事件
pauseBtn.addEventListener('click', toggleAnimation);

function toggleAnimation(){
    // 直接判断当前动画状态，实现暂停/播放切换
    const currentState = sun.style.animationPlayState === "paused" ? "running" : "paused";
    sun.style.animationPlayState = currentState;
    sky.style.animationPlayState = currentState;
}

补充说明 #

当前你提供的CSS代码未给sun、sky元素定义动画规则，HTML代码也未包含sun、sky、pauseBtn对应的DOM元素，实际运行时需要先补充这部分内容功能才能正常生效。

内容的提问来源于stack exchange，提问作者DylanB