点击按钮切换内容并高亮激活按钮的功能合并实现方案

你现在的代码两个功能没法同时生效，核心原因是事件绑定冲突：后续通过JS给按钮赋值onclick的写法，会直接覆盖HTML标签内写的onclick="changedata()"内联事件，点击时只会执行高亮切换逻辑，原来的内容切换代码根本不会触发。
另外你遍历按钮的for...in写法也有隐患，这种写法会遍历到NodeList原型上的非元素属性，容易触发报错。

把两个功能的逻辑合并到同一个点击回调里即可，推荐统一用JS绑定事件，去掉HTML里的内联事件，代码更易维护。

完整修正代码 #

HTML部分

去掉按钮上的内联onclick，新增data-target属性存对应内容的标识参数：

<button class="button" data-target="1">Myreport</button>
<button class="button" data-target="0">Mydata</button>
<div id="mydata">
  <h1>This is my Data</h1>
</div>
<div class="chartCard" id="myreport">
  <div class="chartBox">
    <p>Ram</p>
  </div>
  <div class="chartBox">
    <p>Shyam</p>
  </div>
</div>

JS部分

把高亮切换和内容切换逻辑放到同一个点击事件中，用addEventListener绑定避免覆盖问题，修正遍历写法：

const buttons = document.querySelectorAll(".button");

// 内容切换逻辑
function changedata(parameter){
  if(parameter === 0){
    document.getElementById('myreport').style.display = 'none';
    document.getElementById('mydata').style.display = 'block';
  } else {
    document.getElementById('mydata').style.display = 'none';
    document.getElementById('myreport').style.display = 'flex';
  }
}

// 绑定按钮点击事件
buttons.forEach(btn => {
  btn.addEventListener('click', function() {
    // 切换按钮高亮状态
    buttons.forEach(b => b.classList.remove('highlight'));
    this.classList.add('highlight');
    // 切换对应显示内容
    const target = Number(this.dataset.target);
    changedata(target);
  })
})

// 初始化：默认激活第一个按钮，显示对应内容
buttons[0].click();

CSS部分

你原有样式不需要调整，.highlight类可以正常生效：

* {
  margin: 0;
  padding: 0;
}
#mydata{
  display:none;
  font-size: 25;
}
.chartCard {
  width: 100vw;
  height: calc(90vh - 100px);
  background: rgb(133, 43, 43);
  display: flex;
  align-items: center;
  justify-content: center;
}
.chartBox {
  width: 650px;
  padding: 30px;
  border-radius: 20px;
  margin: 1px 22px;
  border: solid 3px rgba(255, 26, 104, 1);
  background: white;
}
.button:hover{
  background-color: #005201;
  color: rgb(255, 253, 250);
}
.button {
  background-color: rgb(69, 9, 188);
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  margin: 2px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}
.highlight {
  background-color: green;
}

• 同一个元素的同类型事件，用onxxx赋值的方式多次绑定会被后写的覆盖，要绑定多个逻辑推荐用addEventListener，不会出现覆盖问题。
• 遍历DOM节点列表（NodeList）不要用for...in，这个方法是用来遍历对象可枚举属性的，会拿到length、item这类非DOM节点的属性，导致报错，优先用forEach或者for...of遍历。

内容的提问来源于stack exchange，提问作者Gourav kr Singh