Javascript Can'；t从HTML元素中删除add类

我有三个彩色按钮。当我选择一个按钮时，我希望它被选中，另外两个被取消选中。红色、蓝色和黄色是属性isSelected设置为true或false的对象。我可以选择一个按钮一次，将该按钮的isSelected设置为true。但是，我似乎无法选择一个新按钮并取消选择当前按钮

（我知道我可以用jQuery轻松地做到这一点……但我正在尝试学习如何在这里使用Javascript对象……）

下面的代码没有运行，我认为这些代码与没有HTML和CSS的问题相关。该应用程序位于代码笔上：

我的想法是为每个选择器将isSelected设置为true或false。如果isSelected为true，我将class.selected添加到html字符串中，如果它为false，则该字符串不包括该类。然后，每次单击li元素时，我都会重新渲染（至少我认为我正在这么做）字符串

//创建构造函数
功能选择器（彩色）{
这个颜色
this.isSelected=false
}
//设置方法以选择和取消选择列表项
Selector.prototype.selectColor=函数（）{
this.isSelected=true
}
Selector.prototype.deselectColor=函数（）{
this.isSelected=false
}
//将列表项的字符串呈现为HTML
Selector.prototype.toHTML=函数（）{
让htmlString=“”
htmlString+='
for（设i=0；i将
isSelected
设置为
true
或
false
不会更改DOM元素上的类。要添加/删除类，请执行以下操作：

var colourObj = document.querySelector(colour);
colourObj.classList.add('selected');
//or to remove a class
colourObj.classList.remove('selected');

将
isSelected
设置为
true
或
false
不会更改DOM元素上的类。要添加/删除类，请执行以下操作：

var colourObj = document.querySelector(colour);
colourObj.classList.add('selected');
//or to remove a class
colourObj.classList.remove('selected');

根据您的代码，第二次单击任一按钮都不起作用。
原因是
onclick
仅为第一次设置

您的
toHTML
函数将清除现有按钮（第33行：
list.innerHTML='
），从而清除它们的
onclick
事件。您必须在
toHTML
中重新设置它们

像这样：

Selector.prototype.toHTML = function(){

  // set the on click function to the desired color
  let onclickStr = 'setOnClick(\'' + this.colour + '\')';

  let htmlString = ""
  htmlString += '<li id="' + this.colour + '" class="' + this.colour
  if (this.isSelected){
    htmlString += ' selected'
  }

  // Note the following change
  htmlString += '" onclick="' + onclickStr + '"></li>'
  return htmlString
}

根据您的代码，第二次单击任一按钮都不起作用。
原因是
onclick
仅为第一次设置

您的
toHTML
函数将清除现有按钮（第33行：
list.innerHTML='
），从而清除它们的
onclick
事件。您必须在
toHTML
中重新设置它们

像这样：

Selector.prototype.toHTML = function(){

  // set the on click function to the desired color
  let onclickStr = 'setOnClick(\'' + this.colour + '\')';

  let htmlString = ""
  htmlString += '<li id="' + this.colour + '" class="' + this.colour
  if (this.isSelected){
    htmlString += ' selected'
  }

  // Note the following change
  htmlString += '" onclick="' + onclickStr + '"></li>'
  return htmlString
}

您没有提供足够的代码，例如：what is controls.RenderElement？感谢您指出，我现在已经添加了所有内容…Codepen对我来说运行良好。哎呀，我的错误-链接到了我在jQuery中使用的版本。我已经更新了链接。不工作的JS版本：您没有提供足够的代码，例如：what是控件。RenderElement？谢谢你指出这一点，我现在已经添加了所有内容…Codepen对我来说运行良好。哦，我的错误-链接到了我在jQuery中所做的版本。我已经更新了链接。非工作JS版本：我没有得到最后一点。我如何包装函数？很抱歉，你必须把它拼出来…但我迷路了。我明天会再试一次，完全油炸的atm机…谢谢你的回答…@IsabellaChen编辑。见附件jsfiddle我没有得到最后一点。我如何包装函数？很抱歉，你必须把它拼出来…但我迷路了。我明天会再试一次，完全油炸的atm机…谢谢你的回答…@IsabellaChen编辑。见附件jsfiddle