求助解决Uncaught TypeError: e.target.className.add不是函数错误

报错原因 #

• e.target.className 返回的是字符串类型，字符串本身没有.add()方法，这是触发报错的核心原因。
• 用===判断类名存在逻辑漏洞：如果元素同时拥有多个类名（比如letter-box active），这个判断会直接失效。

正确解决方案 #

方案1：使用classList操作类名（推荐）

这是DOM标准提供的类名操作API，简洁且无坑：

document.addEventListener("click", (e) => {
  if (e.target.classList.contains('letter-box')) {
    e.target.classList.add("clicked")
  }
})

• classList.contains()：精准检查元素是否包含指定类名，不受其他类名影响
• classList.add()：安全添加类名，重复调用也不会重复添加相同类名

方案2：用className字符串拼接（不推荐）

如果非要使用className，需要处理字符串拼接的细节问题：

document.addEventListener("click", (e) => {
  // 加空格避免误匹配类似"xletter-box"的类名
  const hasTargetClass = e.target.className === 'letter-box' || e.target.className.includes(' letter-box ')
  if (hasTargetClass) {
    // 前面加空格，避免和原有类名连在一起变成"letter-boxclicked"
    e.target.className += " clicked"
  }
})

注意：这种方式可能会重复添加clicked类名，需要额外做去重判断，不如classList省心。

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