如何解决Joomla 4中JS在无匹配query元素页面运行时报null错误

问题根因 #

1. 初始报错原因：document.querySelectorAll() 无论是否匹配到元素，都会返回非空NodeList对象，布尔判断结果永远为true，因此即使页面无对应元素，内部逻辑仍会执行。当document.querySelector('.year.toggle-form')无匹配元素时返回null，调用null.classList触发类型错误。
2. 修改后功能失效原因：两种修改方案都仅将逻辑封装为openYears函数，但没有主动调用该函数，逻辑始终不会执行；第二种方案额外存在作用域冗余、重复定义变量的问题。

修复代码 #

最简实现（无需封装函数） #

直接判断目标元素是否存在后操作，避免冗余查询：

document.addEventListener('DOMContentLoaded', function() {
  // 仅当两个指定元素都存在时执行操作
  const groupToggle = document.querySelector('.group-toggle');
  const yearsForm = document.querySelector('.year.toggle-form');
  if (groupToggle && yearsForm) {
    yearsForm.classList.add('form-opened');
  }
});

注：套入DOMContentLoaded事件是为了兼容Joomla站点脚本在头部加载的情况，确保DOM渲染完成后再查询元素，避免元素未加载导致的匹配失败。

需封装函数的实现 #

定义函数后必须主动调用才会执行：

document.addEventListener('DOMContentLoaded', openYears);

function openYears() {
  const groupToggle = document.querySelector('.group-toggle');
  const yearsForm = document.querySelector('.year.toggle-form');
  if (groupToggle && yearsForm) {
    yearsForm.classList.add('form-opened');
  }
}

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