点击按钮后如何返回特定的节点列表

问：

我有 3 个按钮代表 3 个 HTML 集合（蔬菜、水果和低碳水化合物的 div），我尝试将选定的集合与可变 （selectedBox） 匹配以用于下一个函数......但我仍然遇到这样的错误：变量“selectedBox”在分配之前被使用。我用打字稿编码

我的代码：

const btnVegetable = document.querySelectorAll<HTMLElement>(".btnVegetable");
const btnFruit = document.querySelectorAll<HTMLElement>(".btnFruit"); 
const btnLC = document.querySelectorAll<HTMLElement>(".btnLC"); 
let selectedBox: NodeListOf<HTMLElement>;

menuBtn.forEach(el => {
    el.addEventListener("click", (el: any) => {
        if (el.target) {
            if (el.target.innerHTML === "Vegetables") {
                selectedBox = btnVegetable;
                return selectedBox;
            }
            if (el.target.innerHTML === "Fruits") {
                selectedBox = btnFruit;
                return selectedBox;
            }
            if (el.target.innerHTML === "Low-Carb") {
                selectedBox = btnLC;
                return selectedBox;
            };
        };
    });
});

然后我打算在下一个代码中使用选定的框，例如..但是我遇到了错误 “变量'selectedBox'在赋值之前使用。”

if (selectedBox) {
    selectedBox.forEach((el) => { .... }
}