点击text-event元素显示对应文本的JavaScript代码问题排查

存在的错误点 #

• 事件绑定冲突：同时使用addEventListener('click', onclick)和onclick = function()，后者会覆盖前者绑定，且onclick变量未定义，直接调用会报错，这也是控制台无反馈的核心原因之一。
• 事件参数误用：onclick的回调参数是事件对象，不是元素集合，ctrls.forEach会直接报错，因为事件对象没有forEach方法。
• DOM选择语法错误：
  • 不存在ctrl.document写法，应直接在当前点击元素内部查找子元素。
  • getElementsByClassName返回HTMLCollection类数组对象，需通过索引（如[0]）获取具体元素后才能操作style。
• 循环逻辑冗余：用IIFE包裹循环变量的写法错误，且完全没必要——直接用let声明循环变量即可解决作用域问题，代码更简洁。

修复后的代码 #

JavaScript部分 #

const textEvent = document.querySelectorAll('.text-event');

// 遍历绑定点击事件
for (let j = 0; j < textEvent.length; j++) {
  textEvent[j].addEventListener('click', function() {
    // 在当前点击元素内查找目标p标签
    const targetP = this.querySelector('.text-style-11');
    if (targetP) {
      targetP.style.visibility = "visible";
    }
  });
}

// 更简洁的forEach写法（二选一即可）
// textEvent.forEach(item => {
//   item.addEventListener('click', function() {
//     const targetP = this.querySelector('.text-style-11');
//     if (targetP) targetP.style.visibility = "visible";
//   });
// });

补充说明 #

• 确保CSS中默认给.text-style-11设置了visibility: hidden;，否则无法看到显示效果。
• querySelector比getElementsByClassName更简洁，直接返回匹配的第一个元素，无需处理类数组索引。
• 用let声明循环变量j，可避免var的作用域提升问题，无需额外的IIFE包裹。

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