Javascript 当满足最终条件时，我的IF语句停止运行

我目前正在创建一个座位计划。用户应能够选择最多3个可用表。选择3个表后，用户将无法再进行选择

目前，用户可以选择4个表，这是我不想要的。此外，当选择4个表时，用户不能再取消选择这些表。然而，当条件未满足时，用户可以取消选择表

我尝试过的事情：

• 玩弄逻辑运算符
• 将if语句放入函数并使用return

const availableTables=document.querySelectorAll（'.available'）；
for（让index=0；index{
if（document.getElementsByClassName（'active'）.length您的代码在能够选择4时遇到的问题是您正在检查if（document.getElementsByClassName（'active'）.length{
if（availableTables[index].classList.contains（'active'））{
availableTables[index].classList.remove（'active'）；
返回；
}
if（document.getElementsByClassName（'active'）。长度<3）{
availableTables[index].classList.add（'active'）；
}
}
}

.active{
背景色：#00ccbc；
}
.座位安排{
身高：100%；
位置：相对位置；
显示器：flex；
弯曲方向：立柱；
填充：12px；
边框：实心1px#e8ebb；
}
.座位计划，灰色{
边框颜色：#d9d9d9！重要；
}
.座位计划.直到门{
显示器：flex；
证明内容：之间的空间；
高度：自动；
颜色：#A9A9；
}
.座位平面图#第1节{
身高：10%；
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
显示器：flex；
}
.座位平面图#第2节{
身高：80%；
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
}
.座位平面图#第2部分#第2部分-左侧{
身高：100%；
宽度：20%；
显示器：flex；
弯曲方向：立柱；
证明内容：周围的空间；
调整项目：灵活启动；
}
.座位平面图#第2部分#第2部分-左侧。半圆{
宽度：35px；
高度：25px；
边框左上半径：110px；
边框右上角半径：110px；
边框：实心1px#00ccbc；
}
.座位平面图#第2部分#第2部分-左侧。半圆：第n个孩子（2）{
变换：旋转（180度）；
}
.座位平面图#第2部分#第2部分-左侧。半圆：第n个孩子（4）{
变换：旋转（180度）；
}
.座位平面图#第2节#第2节-中间{
身高：100%；
宽度：180px；
对正内容：空间均匀；
柔性包装：包装；
显示器：flex；
弯曲方向：立柱；
}
.座位平面图#第2节#第2节-中间。方形容器{
显示器：flex；
证明内容：之间的空间；
}
.座位平面图#第2节#第2节-右侧{
身高：100%；
宽度：20%；
显示器：flex；
弯曲方向：立柱；
证明内容：周围的空间；
对齐项目：柔性端；
}
.座位平面图#第3节{
身高：10%；
对齐项目：居中；
证明内容：中心；
显示器：flex；
证明内容：之间的空间；
}
.座位计划.广场{
高度：35px；
宽度：35px；
边框：实心1px#00ccbc；
}
.座位计划.整圈{
高度：35px；
宽度：35px；
边界半径：50%；
边框：实心1px#00ccbc；
}

直到

门

您的代码在能够选择4时遇到的问题是您正在检查

if（document.getElementsByClassName（'active'）.length{
if（availableTables[index].classList.contains（'active'））{
availableTables[index].classList.remove（'active'）；
返回；
}
if（document.getElementsByClassName（'active'）。长度<3）{
availableTables[index].classList.add（'active'）；
}
}
}

.active{
背景色：#00ccbc；
}
.座位安排{
身高：100%；
位置：相对位置；
显示器：flex；
弯曲方向：立柱；
填充：12px；
边框：实心1px#e8ebb；
}
.座位计划，灰色{
边框颜色：#d9d9d9！重要；
}
.座位计划.直到门{
显示器：flex；
证明内容：之间的空间；
高度：自动；
颜色：#A9A9；
}
.座位平面图#第1节{
身高：10%；
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
显示器：flex；
}
.座位平面图#第2节{
身高：80%；
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
}
.座位平面图#第2部分#第2部分-左侧{
身高：100%；
宽度：20%；
显示器：flex；
弯曲方向：立柱；
证明内容：周围的空间；
调整项目：灵活启动；
}
.座位平面图#第2部分#第2部分-左侧。半圆{
宽度：35px；
高度：25px；
边框左上半径：110px；
边框右上角半径：110px；
边框：实心1px#00ccbc；
}
.座位平面图#第2部分#第2部分-左侧。半圆：第n个孩子（2）{
变换：旋转（180度）；
}
.座位平面图#第2部分#第2部分-左侧。半圆：第n个孩子（4）{
变换：旋转（180度）；
}
.座位平面图#第2节#第2节-中间{
身高：100%；
宽度：180px；
对正内容：空间均匀；
柔性包装：包装；
显示器：flex；
弯曲方向：立柱；
}
.座位平面图#第2节#第2节-中间。方形容器{
显示器：flex；
证明内容：之间的空间；
}
.座位平面图#第2节#第2节-右侧{
身高：100%；
宽度：20%；
显示器：flex；
弯曲方向：立柱；
证明内容：周围的空间；
对齐项目：柔性端；
}
.座位平面图#第3节{
身高：10%；
对齐项目：居中；
证明内容：中心；
显示器：flex；
证明内容：之间的空间；
}
.座位计划.广场{
高度：35px；
宽度：35px；
边框：实心1px#00ccbc；
}
.座位计划.整圈{
高度：35px；
宽度：35px；
边界半径：50%；
博尔