如何在同一文件中结合jQuery与JavaScript ES6并解决相关报错？

错误1：Uncaught TypeError: Cannot read properties of null (reading 'jquery') at form.js #

原因 #

代码尝试读取null对象的jquery属性，主要有两种可能：

• jQuery脚本未正确加载，或加载顺序晚于依赖它的form.js文件
• 通过jQuery选择器获取DOM元素时，目标元素不存在，返回null后仍尝试访问其jquery属性

解决步骤 #

• 调整加载顺序，确保jQuery脚本在form.js之前引入（比如放在页面<head>或底部脚本区的最前面）
• 在form.js中添加元素存在性判断，避免对null对象执行操作，示例：

// 错误示例（可能触发报错）
const $target = $('.target-element');
const version = $target.jquery;

// 修改后
const $target = $('.target-element');
if ($target.length > 0) {
  const version = $target.jquery;
  // 后续业务逻辑
}

错误2：Uncaught TypeError: Cannot set properties of null(setting '_chart') at custom.js #

原因 #

从提供的代码片段来看，document.querySelector(".overall-club")返回了null——页面中不存在类名为overall-club的元素，后续尝试给null对象设置_chart属性时触发报错。

解决步骤 #

1. 校验DOM元素：确认页面中存在带overall-club类名的元素，检查类名拼写（大小写、空格需完全匹配）
2. 添加存在性判断：初始化图表前先判断元素是否存在，修改代码如下：

window.addEventListener(
    "app:mounted",
  function () {
    // Tab 初始化添加判断
    const tabWrapper = document.querySelector(".tab-wrapper-community");
    if (tabWrapper) {
      new Tab(tabWrapper);
    }
    // member profile option 1 total clubs
    const e2 = {
        colors: [""],
        chart: {
          type: "area",
          stacked: !1,
          height: 120,
          parentHeightOffset: 0,
          toolbar: {
            show: !1,
          },
        },
      };
    const t2 = document.querySelector(".overall-club");
    // 元素存在才执行图表初始化
    if (t2) {
      setTimeout(function () {
        t2._chart = new ApexCharts(t2, e2);
        t2._chart.render();
      });
    }
  }
);

3. 确认事件触发时机：确保app:mounted事件在页面DOM完全渲染完成后触发，若DOM未就绪，也会导致元素查找失败，可考虑结合DOMContentLoaded事件做双重保障。

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