单击后编辑Javascript以更改按钮颜色

我是Javascript新手，我目前使用的Javascript是从互联网上复制的，但我需要稍微编辑一下以满足我的需要

目前，我的代码将通过单击同一id下的另一个按钮来更改按钮的颜色，它通过添加和删除名为“active”的标记来实现这一点。这很好，但我有一个问题，我需要帮助更改：

为了使其工作，其中一个按钮必须带有“活动”标签。我想这样做，以便开始时没有一个按钮是“积极的”，直到按下一个。（例如，当用户看到按钮时，它们都是相同的颜色，直到按下一个为止）。按下一个按钮后，代码的工作原理与当前相同

如果我从代码中删除活动标记以开始使用Javascript，则Javascript似乎不起作用，并且单击按钮时不会获得活动标记。我怎样才能改变这个。 这是我目前的代码：

HTML:

Javascript:

<script>
var header = document.getElementById("buttonscontainer");
var btns = header.getElementsByClassName("button");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
  var current = document.getElementsByClassName("active");
  current[0].className = current[0].className.replace(" active", "");
  this.className += " active";
  });
}
</script>

var header=document.getElementById（“buttonscontainer”）；
var btns=header.getElementsByClassName（“按钮”）；
对于（变量i=0；i

您错过了活动类附近的双引号

那是HTML格式的

<div class="button active>Test1</div>

var header=document.getElementById（“buttonscontainer”）；
var btns=header.getElementsByClassName（“按钮”）；
对于（变量i=0；i

。按钮{
背景色：#92afde；
利润率：10px；
颜色：#ffffff；
字体大小：粗体；
文本对齐：居中；
边框：实心2px#92afde；
边界半径：5px；
宽度：150px；
}
.活动，.按钮：悬停{
背景色：#32a852；
}

具有活动按钮
测试1
测试2
测试3
测试4
测试5
没有活动按钮
测试1
测试2
测试3
测试4
测试5

您错过了活动类附近的双引号

那是HTML格式的

<div class="button active>Test1</div>

var header=document.getElementById（“buttonscontainer”）；
var btns=header.getElementsByClassName（“按钮”）；
对于（变量i=0；i

。按钮{
背景色：#92afde；
利润率：10px；
颜色：#ffffff；
字体大小：粗体；
文本对齐：居中；
边框：实心2px#92afde；
边界半径：5px；
宽度：150px；
}
.活动，.按钮：悬停{
背景色：#32a852；
}

具有活动按钮
测试1
测试2
测试3
测试4
测试5
没有活动按钮
测试1
测试2
测试3
测试4
测试5

我强烈建议您使用jQuery进行此类操作。检查JS代码的外观

const setColor=（e）=>{
$（'.button'）.removeClass（'active'））
$（e.target）.addClass（'active'）
}
$（'.button'）。在（'click'，setColor'）
。按钮{
背景色：#92afde；
利润率：10px；
颜色：#ffffff；
字体大小：粗体；
文本对齐：居中；
边框：实心2px#92afde；
边界半径：5px；
宽度：150px；
}
.活动，.按钮：悬停{
背景色：#32a852；
}

测试1
测试2
测试3
测试4
测试5
我强烈建议您使用jQuery进行此类操作。检查JS代码的外观


const setColor=（e）=>{
$（'.button'）.removeClass（'active'））
$（e.target）.addClass（'active'）
}
$（'.button'）。在（'click'，setColor'）
。按钮{
背景色：#92afde；
利润率：10px；
颜色：#ffffff；
字体大小：粗体；
文本对齐：居中；
边框：实心2px#92afde；
边界半径：5px；
宽度：150px；
}
.活动，.按钮：悬停{
背景色：#32a852；
}

测试1
测试2
测试3
测试4
测试5
您需要做的就是创建一个检查，如果当前[0]
未定义或未定义，这应该可以正常工作


var header=document.getElementById（“buttonscontainer”）；
var btns=header.getElementsByClassName（“按钮”）；
对于（变量i=0；i

。按钮{
背景色：#92afde；
利润率：10px；
颜色：#ffffff；
字体大小：粗体；
文本对齐：居中；
边框：实心2px#92afde；
边界半径：5px；
宽度：150px；
}
.活动，.按钮：悬停{
背景色：#32a852；
}

测试1
测试2
测试3
测试4
测试5
您需要做的就是创建一个检查，如果当前[0]

未定义或未定义，这应该可以正常工作

var header=document.getElementById（“buttonscontainer”）；
var btns=header.getElementsByClassName（“按钮”）；
对于（变量i=0；i

。按钮{
背景色：#92afde；
利润率：10px；
颜色：#ffffff；
字体大小：粗体；
文本对齐：居中；
边框：实心2px#92afde；
边界半径：5px；
宽度：150px；
}
.活动，.按钮：悬停{
背景色：#32a852；
}<div class="button active>Test1</div>

<div class="button active">Test1</div>

if(current.length){ ..... } // check if current having value

<script>
  var header = document.getElementById("buttonscontainer");
  var btns = header.getElementsByClassName("button");
  for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", function (event) {
      var current = document.getElementsByClassName("active");
      if (current.length == 0) event.target.className += " active";
      else {
        current[0].className = current[0].className.replace(" active", "");
        this.className += " active";
      }
    });
  }
</script>