JavaScript如何在第一个kingdom函数执行完成后调用第二个同名函数

问题原因 #

你当前代码的核心问题是同名函数会发生覆盖：在JS的同一作用域下定义两个同名函数时，后定义的函数会直接覆盖先定义的内容，所以你现有写法永远只能执行第二个kingdom的逻辑，不可能实现两次点击分步执行的效果。

实现方案 #

我们可以新增一个全局变量存储第一次点击的攻击方ID，根据变量是否有值判断当前处于第几次点击，分别执行对应逻辑即可：

• 变量为空时为第一次点击：存储当前点击的王国ID为攻击方，更新标题文本、隐藏当前按钮
• 变量有值时为第二次点击：拼接被攻击方信息到标题末尾，隐藏当前按钮，流程完成

完整修改代码 #

HTML部分

<h2 id="attack"> The kingdom </h2>
<button id="Roma" onClick= "kingdom(this.id);"> Roma </button> <br>
<button id="Venecia" onClick="kingdom(this.id);"> Venecia </button>

JS部分

// 存储第一次点击的攻击方ID
let attackerId = null;

function kingdom(clicked_id) {
  const attackEl = document.getElementById("attack");
  // 隐藏当前点击的按钮
  document.getElementById(clicked_id).style.display = 'none';

  if (!attackerId) {
    // 第一次点击，记录攻击方
    attackerId = clicked_id;
    attackEl.textContent += clicked_id;
  } else {
    // 第二次点击，记录被攻击方，完成拼接
    attackEl.textContent += " attacks " + clicked_id;
    // 如果需要支持多次攻击，可在这里加一行 attackerId = null; 重置状态
  }
}

内容的提问来源于stack exchange，提问作者Raúl