javascript 未捕获的类型错误:无法读取toggleClass处未定义(读取"toggle")的属性

bqujaahr  于 2023-01-11  发布在  Java
关注(0)|答案(1)|浏览(159)

我有一个使用toggleClass在单击时切换语言的语言选择器(英语或法语)。但是,我需要一个脚本来运行,该脚本将立即将默认的“language”类更改为“language selected”类,以使法语显示为页面上的默认语言。
我使用了下面的代码来交换页面加载的类。我很困惑,因为直到今天早上,这都是按预期工作的,没有任何问题:

function toggleClass(element, className1, className2) {
  element
    .classList
    .toggle(className1);
  element
    .classList
    .toggle(className2)
}

toggleClass(#languageSelector, 'language', 'language selected');

但是今天我收到这个错误:

Uncaught SyntaxError: Private field '#languageSelector' must be declared in an enclosing class (at (index):190:12)

所以我添加了'#languageSelector'来包含元素,这最终产生了另一个错误:

(index):184 Uncaught TypeError: Cannot read properties of undefined (reading 'toggle')
at toggleClass ((index):184:22)
at (index):190:1

我看到其他人也有类似的问题,但我不知道如何将解决方案应用到现有代码。
总的来说,这个代码:

function toggleClass(element, className1, className2) {
  element
    .classList
    .toggle(className1);
  element
    .classList
    .toggle(className2)
}

toggleClass('#languageSelector', 'language', 'language selected');

正在产生此错误:

Uncaught TypeError: Cannot read properties of undefined (reading 'toggle')
at toggleClass ((index):184:22)
at (index):190:1

这几天运行正常。据我所知,没有添加,删除,或改变现有的网站以任何方式,但我不认为这是可能的。为什么这会停止工作一夜之间?
我试着跟踪错误并进行调整,但我不明白为什么阅读在以前工作的情况下失败了。我需要使用不同的方法来达到相同的结果吗?

bqf10yzr

bqf10yzr1#

这几天都能正常工作。
不,它没有。其他一些代码可能有,但这里显示的代码没有。
据我所知,没有任何添加,删除,或改变现有的网站以任何方式
这听起来更像是猜测而不是观察。如果你没有使用源代码管理,那么你就不知道你曾经拥有什么代码,或者它是如何随着时间的推移而变化的。现在是开始使用源代码管理的好时机。
你要传递一个字符串作为函数的第一个参数:

toggleClass('#languageSelector', 'language', 'language selected');

然后在函数中对该字符串执行以下操作:

element.classList.toggle(className1);

字符串没有名为classList的属性。字符串从来没有这样的属性。
您 * 可能 * 想要传递一个元素,例如:

function toggleClass(element, className1, className2) {
  element
    .classList
    .toggle(className1);
  element
    .classList
    .toggle(className2)
}

toggleClass(document.querySelector('#languageSelector'), 'language', 'language selected');

当然,测试这个会产生另一个错误,指出你不能在类名中包含空格字符,这意味着你的意思可能是:

toggleClass(document.querySelector('#languageSelector'), 'language', 'selected');

例如:

function toggleClass(element, className1, className2) {
  element
    .classList
    .toggle(className1);
  element
    .classList
    .toggle(className2)
}

toggleClass(document.querySelector('#languageSelector'), 'language', 'selected');
.language {
  color: green;
}

.selected {
  color: red;
}
<span id="languageSelector" class="language">test</span>

相关问题