Javascript：选择其他

我正在开发一个API，其中的计划是用户在发出POST请求之前填写一个包含多个选项的简短清单。对于每个部分，用户可以获得多个选项/按钮，但只能选择其中的一个

所选按钮将标记类

（将背景颜色更改为绿色），而其他按钮保持白色（除非单击其中一个按钮，在这种情况下，该按钮变为绿色，其他按钮变为白色）

我尝试了两种不同的Javascript函数，但到目前为止，没有一种能够实现这种行为

尝试1：

function Label(self, group) {
  //    mark button
  let btns = document.getElementsByClassName(group);

  for (el in btns) {
      btns[el].classList.remove('marked') 
  }
  self.classList.add('marked');
}

尝试2（更明确地检查是否涉及
self
）

我的推理是首先从所有元素中删除
.marked
类，然后将其设置在
这个
元素上。在HTML中使用
onclick
命令调用该函数时，它知道它是哪个元素

<div class="group1">
    <button onclick="Label(this, pt_toggle)" class="pt_toggle">Incorrect</button>
    <button onclick="Label(this, pt_toggle)" class="pt_toggle">Partially correct</button>
    <button onclick="Label(this, pt_toggle)" class="pt_toggle">Correct</button>
</div>


不正确
部分正确
对的

然而，这些功能并没有如我所希望的那样发挥作用。它抛出一个
未捕获类型错误：无法读取未定义的
错误的属性“remove”，并且未设置该类

有人知道我做错了什么吗
 单击按钮添加“标记”类：

您的html：

<button onclick="Label(event)" class="pt_toggle">Incorrect</button>

单击按钮添加“已标记”类：

您的html：

<button onclick="Label(event)" class="pt_toggle">Incorrect</button>

您在
循环语法中遇到了“
for.”的一个功能。执行以下操作时：

for (el in btns) {
    if (btns[el] !== self) {
        btns[el].classList.remove('marked');
    }
}

将迭代
btns
对象中的每个属性，包括
length
属性，您将无法从
btns[“length”]
中删除类名

如果切换到使用
btns.length
作为限制的正常
for
循环，则不会迭代对象中的非按钮元素属性：

for (var el = 0; el < btns.length; el++) {
    if (btns[el] !== self) {
        btns[el].classList.remove('marked');
    }
}

for（var el=0；el
您在循环语法中遇到了“
for.”的一个功能。执行以下操作时：

for (el in btns) {
    if (btns[el] !== self) {
        btns[el].classList.remove('marked');
    }
}

将迭代
btns
对象中的每个属性，包括
length
属性，您将无法从
btns[“length”]
中删除类名

如果切换到使用
btns.length
作为限制的正常
for
循环，则不会迭代对象中的非按钮元素属性：

for (var el = 0; el < btns.length; el++) {
    if (btns[el] !== self) {
        btns[el].classList.remove('marked');
    }
}

for（var el=0；el
有一个元素本机执行同样的操作：。这使得编写更简洁的解决方案更容易（除了CSS使其看起来更像一个按钮，但这是可选的）：


var buttons=Array.from（document.queryselectoral（“.group1.button”）；
按钮。forEach（（el）=>{
el.addEventListener（“点击”，函数（e）{
buttons.forEach（（button）=>button.classList.toggle（“标记”，button.querySelector（“输入”）。选中））；
});
});
/*隐藏单选按钮*/
.按钮输入{显示：无；}
/*选中时使其变为绿色*/
.button.marked{
背景：绿色
}
/*使标签看起来更像按钮*/
.按钮{
字体：标题；
字体大小：较小；
填充：2px6px；
边框：1px实心#999；
边界半径：1px；
背景：白色；
}
.按钮：悬停{
边框颜色：三点阴影；
}

不正确
部分正确
对的
有一个元素本机执行同样的操作：。这使得编写更简洁的解决方案更容易（除了CSS使其看起来更像一个按钮，但这是可选的）：


var buttons=Array.from（document.queryselectoral（“.group1.button”）；
按钮。forEach（（el）=>{
el.addEventListener（“点击”，函数（e）{
buttons.forEach（（button）=>button.classList.toggle（“标记”，button.querySelector（“输入”）。选中））；
});
});
/*隐藏单选按钮*/
.按钮输入{显示：无；}
/*选中时使其变为绿色*/
.button.marked{
背景：绿色
}
/*使标签看起来更像按钮*/
.按钮{
字体：标题；
字体大小：较小；
填充：2px6px；
边框：1px实心#999；
边界半径：1px；
背景：白色；
}
.按钮：悬停{
边框颜色：三点阴影；
}

不正确
部分正确
对的
您不需要在标签函数中传递“this”或“pt\u toggle”。您可以从event.target获取这些信息。您不需要在标签函数中传递“this”或“pt_toggle”。您可以从event.target获取这些信息。@Jasper您还可以传播集合以对（el in[…BTN]）执行循环
@Jasper您还可以传播集合以对（el in[…BTN]）执行循环