按钮图标切换（class属性）功能失效，新手求助技术排查

你遇到的问题主要出在事件绑定、变量声明、逻辑判断这几个地方，下面逐一梳理错误并给出修正方案：

错误点分析 #

• onclick事件未正确触发：HTML中onclick="updateButton"只是引用了函数，没有执行，必须写成onclick="updateButton()"才会调用函数，updateButton2同理。
• updateButton2函数的变量错误：函数里const div2 = document.getElementById(div2)是错误的——参数应该是字符串"div2"，而且全局已经声明了div2变量，这里重复声明会覆盖全局变量，导致无法获取DOM元素。
• 逻辑判断冗余导致切换失效：两个独立的if语句会导致切换后立刻反转，比如把fa-play改成fa-pause后，第二个if会检测到fa-pause，又改回fa-play，应该用if...else或者else if。
• DOM元素获取时机问题：全局的div1和div2在页面DOM未加载完成时就获取，可能会得到null，最好把JS代码放在body末尾或者用DOM加载完成事件包裹。

修正后的代码 #

HTML部分

<!DOCTYPE html>
<html>
<head>
    <script src="https://kit.fontawesome.com/0055907593.js" crossorigin="anonymous"></script>
</head>
<body>
    <div>
        <button class="player__button toggle" title="Toggle Play">
            <i class="fa-solid fa-play" id="div1" onclick="updateButton()"></i>
        </button>
        <button class="player__button toggle" title="Toggle Play">
            <i class="fa-solid fa-angle-down" id="div2" onclick="updateButton2()"></i>
        </button>
    </div>
    <!-- JS放在body末尾，确保DOM加载完成 -->
    <script>
        var div1 = document.getElementById("div1")
        var div2 = document.getElementById("div2")

        function updateButton() {
            var className = div1.getAttribute("class");
            if(className === "fa-solid fa-play") {
                div1.className = "fa-solid fa-pause";
            } else if(className === "fa-solid fa-pause") {
                div1.className = "fa-solid fa-play";
            }
        }

        function updateButton2() {
            var className = div2.getAttribute("class");
            if(className === "fa-solid fa-angle-down") {
                div2.className = "fa-solid fa-angle-up";
            } else if(className === "fa-solid fa-angle-up") {
                div2.className = "fa-solid fa-angle-down";
            }
        }
    </script>
</body>
</html>

更简洁的写法（推荐） #

用Font Awesome结合classList.toggle方法，不用手动判断class，代码更简洁可靠：

<!DOCTYPE html>
<html>
<head>
    <script src="https://kit.fontawesome.com/0055907593.js" crossorigin="anonymous"></script>
</head>
<body>
    <div>
        <button class="player__button toggle" title="Toggle Play">
            <i class="fa-solid fa-play" id="div1" onclick="toggleIcon(this, 'fa-play', 'fa-pause')"></i>
        </button>
        <button class="player__button toggle" title="Toggle Play">
            <i class="fa-solid fa-angle-down" id="div2" onclick="toggleIcon(this, 'fa-angle-down', 'fa-angle-up')"></i>
        </button>
    </div>
    <script>
        function toggleIcon(el, class1, class2) {
            el.classList.toggle(class1);
            el.classList.toggle(class2);
        }
    </script>
</body>
</html>

这种写法用this直接获取点击的元素，不用依赖ID，还能复用同一个函数处理不同的图标切换，更灵活。

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