如何访问多层div类中的按钮？解决点击输出'wrong'及方法失效问题

先明确你代码里的两个核心问题：

1. 变量名不匹配：你定义了var btn = document.getElementsByClassName("firstRow");，但后续调用的是btnContainer[0]，变量名不一致会直接触发报错。
2. id重复违规：HTML中id是元素的唯一标识，三个按钮共用id="sect"不符合规范，建议改用class属性。

下面提供两种可行的实现方案：

方案一：事件委托（推荐） #

给目标父元素firstRow绑定点击事件，通过事件对象判断点击的是按钮元素，这种方式支持后续动态新增按钮，无需重新绑定事件：

<div class='container'>
  <div class='sections'>
    <div class='firstRow'>
      <button class="sect">cat1</button>
      <button class="sect">cat2</button>
      <button class="sect">cat3</button>
    </div>
  </div>
</div>

<script>
// 获取firstRow元素
const firstRow = document.getElementsByClassName("firstRow")[0];
firstRow.addEventListener("click", function(e) {
  // 仅当点击对象是按钮时输出内容
  if (e.target.tagName === 'BUTTON') {
    console.log("wrong");
  }
});
</script>

方案二：直接绑定按钮事件 #

直接选中firstRow下的所有按钮，逐个绑定点击事件，适合按钮数量固定的场景：

<div class='container'>
  <div class='sections'>
    <div class='firstRow'>
      <button class="sect">cat1</button>
      <button class="sect">cat2</button>
      <button class="sect">cat3</button>
    </div>
  </div>
</div>

<script>
// 选中firstRow下的所有按钮
const buttons = document.querySelectorAll(".firstRow button");
// 遍历给每个按钮绑定点击事件
buttons.forEach(btn => {
  btn.addEventListener("click", () => {
    console.log("wrong");
  });
});
</script>

内容的提问来源于stack exchange，提问作者Fancyson