如何使用JavaScript结合CSS visibility:hidden实现无ID按钮切换功能

document.querySelector('[name="button2"]').addEventListener('click', function () {
  const targetBtn = document.querySelector('#Hbutton');
  // 兼容CSS初始设置的hidden状态，实现来回切换
  targetBtn.style.visibility = targetBtn.style.visibility === 'visible' ? 'hidden' : 'visible';
});

• 触发按钮选择器错误：你需要匹配name属性为button2的元素，应使用属性选择器语法[name="button2"]，原代码中button8为未定义变量，无法匹配到目标触发元素
• 事件名格式错误：click是字符串类型的事件名，需要用引号包裹
• 受控按钮选择器错误：受控按钮ID为Hbutton，应使用ID选择器#Hbutton匹配，原代码的hiddenbutton选择器无对应元素
• 缺少切换逻辑：原代码仅支持将按钮设置为可见状态，新增的三元判断逻辑可实现可见/隐藏状态的来回切换

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