javascript - 带有 querySelector 的 Gatsby 函数在具有正确 scss 的 .classList 上给出空错误

Question

TypeError：无法读取 null 的属性“classList”。

我知道，你会认为它已经回答过很多次了。我也是这样，做了一个研究，但似乎没有什么合适的。

我正在使用 gatsbyJS。我正在尝试在我的网站上重新创建：[https://codepen.io/Azametzin/pen/rZJYpa]。如果 DOM 没有加载，我尝试更改位置，并从所有主题中包装在文档等中，但事情似乎仍然很糟糕。

无论如何，这里是代码：

function LanguagePretty() {
const { i18n } = useTranslation();

return (

    <div class="chooseLang" value={i18n.language}
    onClick={(e) =>
      i18n.changeLanguage(e.target.value)
    }>
    <div>
     <span id="en-lang" class="lang en-lang chosen" onClick={changeLang('en', this)} value="en"></span>
     <span id="bg-lang" class="lang bg-lang" onClick={changeLang('bg', this)} value="bg"></span>
   </div>
  </div>
);
};

function changeLang(language, el) {
var container = document.querySelector('.chooseLang').classList;
el = el.classList;


if (container.contains('open')) {
  container.remove('open');
  if (!el.contains('chosen')) {
    
    document.querySelector('.chooseLang .chosen').classList.remove('chosen');
    el.add('chosen');
    
    console.log(language + ' chosen')
    // your code
    
  }
  return;
}

container.add('open');

 }
   export default LanguagePretty;

错误出现在.classlist这里的每个案例，也出现在add, remove and contains('element'). 让我这样它无法识别scss，但它确实如此，因为如果我将代码与示例链接保持相同onclick="changeLang('english', this)"而不是这样onclick={changeLang('english', this)}，错误确实消失了，但是当我单击<span>元素时没有任何反应。某处有一个错误，我可怜的新手技能无法解决。请协助。

标签： javascript