onclick不能按预期工作

我有一个脚本，单击该脚本可展开手风琴菜单。我通过使用getElementsByClassName选择所需的菜单项

window.onload = function() {
 var acc = document.getElementsByClassName("accordion_f");
 //  var acc = document.querySelectorAll(".accordion_f");
 var i; 

// test code start
 acc[10].classList.toggle("active");
 acc[10].nextElementSibling.classList.toggle("show");
// test code end

 for (i = 0; i < acc.length; i++) {
   acc[i].onclick = function(){
//        acc[i].classList.toggle("active");
   this.classList.toggle("active");
//        acc[i].nextElementSibling.classList.toggle("show");
   this.nextElementSibling.classList.toggle("show");
   }
 }
};  

不幸的是，onclick不会触发，我不确定自己在做什么错。我通过使用测试了getElementsByClassName

acc[10].classList.toggle("active");
acc[10].nextElementSibling.classList.toggle("show");

这可以正常工作，因此getElementsByClassName可以正常工作，我也尝试过使用document.querySelector，所有这些也可以正常工作

我尝试使用此方法，但是acc [i]似乎都没有用。但是我感觉这不是问题，因为当我检查html元素并检查“事件”时，我没有看到在当前元素上注册任何事件处理程序。

我的html看起来像这样：

<button class="accordion_f">24/7 Activity Tracking</button>
<div class="panel">
      <p>Tracks your daily activity at five intensity levels for 24 hours a day, seven days a week, and provides a complete picture of all of your activity. It counts your active time, daily burnt calories, steps, distance from steps and sleep.</p>
</div>

因此，总而言之，为什么要这样做：

 acc[10].classList.toggle("active");
 acc[10].nextElementSibling.classList.toggle("show");

但这不起作用甚至无法在元素上注册

   acc[i].onclick = function(){

更新

我的手风琴菜单位于Tab菜单内，该菜单具有自己的JavaScript来更改标签：

var newHTML = document.getElementById(newTab).innerHTML;
document.getElementById('first_View').innerHTML = newHTML;

我将手风琴菜单移至Tab菜单之外，并且onclick起作用了。如果我从选项卡菜单脚本中注释掉上面的代码，我的手风琴菜单可以使用，但是选项卡菜单不会更改。

使用addEventListener代替onclick进行进一步测试：

window.onload = function() {
  var acc = document.getElementsByClassName("accordion_f");
  var i; 

// test code start
  acc[10].classList.toggle("active");
  acc[10].nextElementSibling.classList.toggle("show");
// test code end

  for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener('click', expand_m, false); 
  } 
};  

function expand_m(){      
   this.classList.toggle("active");
   this.nextElementSibling.classList.toggle("show");
}

这与上面的原始onclick代码完全相同，当我检查html元素并检查Events时，我看不到当前元素上注册了任何事件处理程序，因此单击对我不起作用，除非我停止innerHTML更改。

任何帮助，将不胜感激。