解决JavaScript报错：Cannot read properties of null (reading 'querySelectorAll')

解决 JavaScript 报错：'Cannot read properties of null (reading 'querySelectorAll')'

在开发食材供应链配送环节实时监管系统时，你可能会遇到 'Cannot read properties of null (reading 'querySelectorAll')' 的错误信息。 这通常是因为你在代码尝试使用 querySelectorAll 方法选择元素时，该元素尚未被创建或加载到DOM中。

问题原因

在你的代码中，错误出现在 const taskTable = form.nextElementSibling.querySelector('.ui.celled.table'); 这一行。 这意味着 form.nextElementSibling 返回了 null， 可能是因为在执行这段代码时，表单 (form) 的下一个兄弟元素 (任务表格) 还不存在。

解决方案

为了解决这个问题，你需要将 const taskTable = form.nextElementSibling.querySelector('.ui.celled.table'); 这一行代码移动到调度车辆按钮点击事件的内部，并放在获取所选日期、配送区域和配送车辆值的代码之后。

以下是修复后的代码：javascriptscheduleBtn.addEventListener('click', function(event) { event.preventDefault();

const selectedDateValue = form.querySelector('input[type="date"]').value; const selectedAreaValue = form.querySelector('.ui.dropdown[name="area"]').value; const selectedVehicleValue = form.querySelector('.ui.dropdown[name="vehicle"]').value;

if (!selectedDateValue || !selectedAreaValue || !selectedVehicleValue) { return; }

// 在这里创建任务表格 const taskTable = form.nextElementSibling.querySelector('.ui.celled.table');

// 执行配送车辆调度逻辑，将任务分配给选定的车辆

// ... 其他代码 ...});

代码解释

1. 事件监听器: 代码使用了 addEventListener 方法监听调度车辆按钮的点击事件。2. 获取用户输入: 在事件处理函数内部，我们首先获取用户选择的日期、配送区域和配送车辆的值。3. 创建任务表格: 在获取用户输入后，我们才使用 querySelector 获取任务表格元素。 4. 调度逻辑: 获取到任务表格后，就可以执行配送车辆调度逻辑，将任务分配给选定的车辆。

通过将获取任务表格的代码移动到事件处理函数内部，并确保在用户点击按钮后才执行，我们就可以避免 'Cannot read properties of null (reading 'querySelectorAll')' 的错误。

希望这个解决方案可以帮助你解决问题！ 如果还有其他疑问，请随时提出。