Javascript 过滤数据时更改按钮的颜色

我花了很多时间研究这个问题，但似乎找不到答案

我只是想在点击按钮时改变按钮的颜色。目前，按钮已注册，但无法识别背景颜色的变化。代码也会遍历和过滤数据，因此会有额外的功能。我知道这是非常简单的，但我似乎无法确定按钮的背景和改变它

CSS:

HTML:

按钮1
按钮2
按钮3
按钮4

Javascript:

// Shared function
function filterData() {
  var newData = _(site_data).filter(function(site) {
    return site[buildingType] < minYear;
  });
  displaySites(newData);
  return newData.length;
}


function buttonClick(filterField) {
  if (filterField !== undefined) {
    //console.info('Changing building filter to', filterField);
    buildingType = filterField;

  }
  //console.info('Applying filter');
  filterData();

  //click to change color of button background
  var backgroundColor = document.getElementById('option')

  function buttonClick(backgroundColor) {
    if (backgroundColor.onclick == true) {
        option.style.backgroundColor = "#0fe417";
      } else {
        option.style.backgroundColor = "#0029ff";
      }
  }
}

//共享函数
函数filterData（）{
var newData=u（站点数据）。过滤器（函数（站点）{
返回站点[buildingType]

我只是将元素传递给函数并更改背景颜色： [用颜色重置更新！！]

按钮1
按钮2
按钮3
按钮4
.按钮{
位置：相对位置；
宽度：70px；
填充物：5px 5px；
右边距：3倍；
利润底部：3倍；
光标：指针；
文本对齐：居中；
字体大小：.65em；
边框：.5px实心#e0；
浮动：左；
-moz边界半径：3px；
边界半径：3px；
背景：rgb（255、255、255）；
}
.按钮：悬停{
背景：#e0；
}
.按钮.电流{
背景：#2424；
颜色：#fff；
}
//共享功能
函数filterData（）{
//只需对隐藏错误进行注释
//var newData=u（站点数据）。过滤器（函数（站点）{
//返回站点[buildingType]

---

使用e.target.dataset代替按钮单击（'b2'）

嘿，它工作了，谢谢！然而，现在红色只是保持不变，但按钮是这样的，一次只能选择一个按钮。有没有办法调和这一点？酷！我编辑代码的方式与您相同，请看@DeebaYavromhey抱歉，还有一件事，我该怎么做才能确保在加载页面时突出显示第一个按钮？只需将其添加到您的js

文档中。querySelector（“.buttons”）.firstElementChild.click（）@DeebaYavrom
<div class="buttons">
    <div a href="#" data-placement="bottom" data-val="1" id="option" name="updateButton" type="button" value="Update" class="button" onclick="buttonClick('b1')">Button 1</div>

    <div a href="#" id="option" class="button" data-val="2" type="button" value="Update" onclick="buttonClick('b2')">Button 2</div>

    <div a href="#" id="option" class="button" data-val="3" type="button" value="Update" onclick="buttonClick('b3')">Button 3</div>

  <div a href="#" id=option class="button" data-val="3" type="button" value="Update" onclick="buttonClick('b4')">Button 4</div>
  </div>

// Shared function
function filterData() {
  var newData = _(site_data).filter(function(site) {
    return site[buildingType] < minYear;
  });
  displaySites(newData);
  return newData.length;
}


function buttonClick(filterField) {
  if (filterField !== undefined) {
    //console.info('Changing building filter to', filterField);
    buildingType = filterField;

  }
  //console.info('Applying filter');
  filterData();

  //click to change color of button background
  var backgroundColor = document.getElementById('option')

  function buttonClick(backgroundColor) {
    if (backgroundColor.onclick == true) {
        option.style.backgroundColor = "#0fe417";
      } else {
        option.style.backgroundColor = "#0029ff";
      }
  }
}

const buttons = [...document.querySelectorAll(".button")];
buttons.forEach(item => {
  item.addEventListener("click", e => {
    console.log(e.target.dataset.val)
    buttons.forEach(item => {
      item.classList.remove("current");
    });
    e.target.classList.add("current");
    filterData(); //and other code...
  });
});