语言选择器toggleClass报错求助：Uncaught TypeError问题排查

安全阿岳

2026-8-5

问题分析与解决方法

错误原因拆解

私有字段语法误用：最初代码里的#languageSelector是ES6类的私有字段语法，并非DOM元素选择器，浏览器会将其识别为未声明的私有字段，因此抛出语法错误。
DOM元素未正确获取：后来改为传入选择器字符串，但toggleClass函数直接尝试调用字符串的classList属性——字符串本身没有该属性，自然触发Cannot read properties of undefined错误。
潜在的加载时机问题：之前代码正常运行可能是巧合（脚本执行时DOM元素已加载），若近期浏览器缓存或页面加载顺序变化，可能导致代码执行时元素还未渲染，同样会引发元素为undefined的错误。

修复后的代码方案

方案一：函数接收DOM元素（推荐）

先获取目标DOM元素，再传入函数操作，同时确保代码在DOM加载完成后执行：

function toggleClass(element, className1, className2) {
  // 提前判断元素是否存在，避免报错
  if (!element) return;
  element.classList.toggle(className1);
  element.classList.toggle(className2);
}

// 等待DOM完全加载后执行代码
document.addEventListener('DOMContentLoaded', function() {
  // 通过ID获取元素（如果元素id是languageSelector）
  const langSelector = document.getElementById('languageSelector');
  toggleClass(langSelector, 'language', 'language selected');
});

方案二：函数内部处理选择器

让函数直接接收选择器字符串，内部完成DOM查询：

function toggleClass(selector, className1, className2) {
  const element = document.querySelector(selector);
  if (!element) return;
  element.classList.toggle(className1);
  element.classList.toggle(className2);
}

document.addEventListener('DOMContentLoaded', function() {
  toggleClass('#languageSelector', 'language', 'language selected');
});