如何实现JavaScript多按钮联动点击触发不同弹窗提示功能

• 函数命名大小写不匹配：HTML中A按钮绑定的点击事件是onfourButtonClick（f小写），而你编写的2号按钮对应的A点击处理函数命名为onFourButtonClick（F大写），JavaScript对大小写敏感，因此点击A按钮只会执行1号按钮对应的逻辑，2号的逻辑永远不会被触发。
• 1号按钮联动A的提示内容未修改：现有1号对应逻辑里弹窗内容为Test Test2，和你需要的Test Test6不符。
• 状态逻辑分散：两个独立的A按钮点击函数会导致状态判断混乱，最好整合为统一的处理逻辑避免冲突。

JS代码 #

// 存储当前激活的上层按钮编号，初始为null表示没有选中
let activeTopButton = null;

// 1号按钮点击逻辑
function onFirstButtonClick() {
  activeTopButton = 1;
}
// 2号按钮点击逻辑
function onSecondButtonClick(){
  activeTopButton = 2;
}
// 3号按钮点击逻辑
function onThirdButtonClick(){
  activeTopButton = 3;
}

// A按钮统一点击逻辑
function onfourButtonClick() {
  if(activeTopButton === 1) {
    alert('Test Test6');
  } else if(activeTopButton === 2) {
    alert('Button2 Test');
  } else if(activeTopButton === 3) {
    // 3号按钮选中时A的提示，可自行修改
    alert('Button3 Test');
  } else {
    // 未选中上层按钮时的默认提示
    alert('Test2');
  }
  // 点击A后重置选中状态
  activeTopButton = null;
}

// B、C、D按钮的函数可按相同逻辑补充
function onfiveButtonClick() {
  // 按需求写对应逻辑
}
function onsixButtonClick() {
  // 按需求写对应逻辑
}
function onsevenButtonClick() {
  // 按需求写对应逻辑
}

HTML代码（无需修改，保持原有即可） #

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <button type="button" onclick="onFirstButtonClick()">1<br><br>Button</button>
  <button type="button" onclick="onSecondButtonClick()">2<br><br>Button</button>
  <button type="button" onclick="onThirdButtonClick()">3<br><br>Button</button>
  <br /><br>
  <button type="button" onclick="onfourButtonClick()">A</button>
  <button type="button" onclick="onfiveButtonClick()">B</button>
  <button type="button" onclick="onsixButtonClick()">C</button>
  <button type="button" onclick="onsevenButtonClick()">D</button>

</body>
</html>

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