为何className赋值切换类失效但classList.add/remove可正常工作？

刚入门JavaScript，遇到如下问题：用classList.add()和classList.remove()的代码能正常实现订阅按钮的类切换；但用className赋值的代码仅第一次点击能将按钮类改为is-subscribed，再次点击就报错且无法完成切换，原因如下：

有效代码 #

<!DOCTYPE html>
<html>
  <head>
    <style>
      .youtube-text {
        font-family: Arial;
        font-size: larger;
      }
      .subscribe-button {
        font-family: 'Arial Narrow Bold';
        font-size: large;
        color: white;
        background-color: black;
        padding-left: 12px;
        padding-top: 12px ;
        padding-bottom: 12px ;
        padding-right: 12px;
        border-radius: 20px;
      }
      .is-subscribed {
        font-family: 'Arial Narrow Bold';
        font-size: large;
        color: black;
        background-color: white;
        padding-left: 12px;
        padding-top: 12px ;
        padding-bottom: 12px ;
        padding-right: 12px;
        border-radius: 20px;
      }
    </style>
    <title>

    </title>
  </head>
  <body>
    <p2>Youtube Subscribe Button</p2><br><Br>
    <button class = 'subscribe-button' onclick="
      subscribeButton();
      ">Subscribe</button>
    <script async>
      function subscribeButton() {
        const subButton = document.querySelector('.subscribe-button');
        if (subButton.innerHTML === 'Subscribe'){
          subButton.innerHTML = 'Subscribed';
          subButton.classList.add('is-subscribed');
        }
        else {
          subButton.innerHTML = 'Subscribe';
          subButton.classList.remove('is-subscribed');
        } 
      }
    </script>
  </body>
</html>

失效代码 #

<!DOCTYPE html>
<html>
  <head>
    <style>
      .youtube-text {
        font-family: Arial;
        font-size: larger;
      }
      .subscribe-button {
        font-family: 'Arial Narrow Bold';
        font-size: large;
        color: white;
        background-color: black;
        padding-left: 12px;
        padding-top: 12px ;
        padding-bottom: 12px ;
        padding-right: 12px;
        border-radius: 20px;
      }
      .is-subscribed {
        font-family: 'Arial Narrow Bold';
        font-size: large;
        color: black;
        background-color: white;
        padding-left: 12px;
        padding-top: 12px ;
        padding-bottom: 12px ;
        padding-right: 12px;
        border-radius: 20px;
      }
    </style>
    <title>

    </title>
  </head>
  <body>
    <p2>Youtube Subscribe Button</p2><br><Br>
    <button class = 'subscribe-button' onclick="
      subscribeButton();
      ">Subscribe</button>
    <script async>
      function subscribeButton() {
        const subButton = document.querySelector('.subscribe-button');
        if (subButton.innerHTML === 'Subscribe'){
          subButton.innerHTML = 'Subscribed';
          subButton.className = 'is-subscribed';
        }
        else {
          subButton.innerHTML = 'Subscribe';
          subButton.className = 'subscribe-button';
        } 
      }
    </script>
  </body>
</html>

问题核心原因 #

失效代码的关键问题出在元素选择器和className赋值的特性：

1. 第一次点击按钮时，代码执行subButton.className = 'is-subscribed'，这会直接替换按钮原有的subscribe-button类，按钮此时的类只剩下is-subscribed。
2. 第二次点击按钮时，函数里执行document.querySelector('.subscribe-button')，因为按钮已经没有subscribe-button这个类了，所以查询结果是null。后续访问null.innerHTML就会触发Cannot read properties of null (reading 'innerHTML')的报错，导致代码中断，无法完成切换。

而有效代码用classList.add()和classList.remove()时，只是在原有subscribe-button类的基础上添加/移除is-subscribed类，按钮始终保留subscribe-button类，所以每次点击都能通过querySelector('.subscribe-button')找到目标元素，不会出现报错。

简单修复方案 #

可以从两个方向解决：

• 改用id选择器：给按钮添加id="subscribeBtn"，然后用document.getElementById('subscribeBtn')获取元素，id不会随类的变化而改变，每次都能准确找到元素。
• 保留原有类：切换类时不要直接替换，而是用className同时保留基础类，比如subButton.className = 'subscribe-button is-subscribed'，移除时设回subscribe-button，这样按钮始终有subscribe-button类，查询不会失效。不过更推荐用classList的方式，代码更简洁安全。

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