如何用JavaScript实现点击按钮后显示另一个按钮？

基础实现：点击第一个按钮显示对应目标按钮 #

用HTML+JavaScript就能快速搞定，核心思路是初始隐藏目标按钮，给触发按钮绑定点击事件来切换显示状态。

代码示例：

<!-- HTML结构 -->
<div class="wire-group">
  <!-- 左侧触发按钮 -->
  <button class="start-btn" data-target="wire-1">红色电线</button>
  <!-- 右侧目标按钮（初始隐藏） -->
  <button class="target-btn" id="wire-1" style="display: none;">连接红色</button>
</div>

<script>
// 获取所有触发按钮
const startButtons = document.querySelectorAll('.start-btn');

// 给每个触发按钮绑定点击事件
startButtons.forEach(btn => {
  btn.addEventListener('click', () => {
    // 获取对应目标按钮的ID
    const targetId = btn.dataset.target;
    // 显示目标按钮
    document.getElementById(targetId).style.display = 'inline-block';
  });
});
</script>

<style>
/* 可选：美化按钮样式，贴近游戏风格 */
.start-btn, .target-btn {
  padding: 10px 20px;
  margin: 5px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.start-btn {
  background-color: #ff4444;
  color: white;
}
.target-btn {
  background-color: #4CAF50;
  color: white;
}
</style>

扩展到多组电线（更贴近游戏） #

如果要做完整的接电线游戏，可以给每组电线配对，点击错误时重置，正确时标记完成：

<div class="game-container">
  <div class="left-wires">
    <button class="wire-btn" data-color="red">红色</button>
    <button class="wire-btn" data-color="blue">蓝色</button>
    <button class="wire-btn" data-color="yellow">黄色</button>
  </div>
  <div class="right-wires">
    <button class="target-wire" data-match="red" style="display: none;">红色接口</button>
    <button class="target-wire" data-match="blue" style="display: none;">蓝色接口</button>
    <button class="target-wire" data-match="yellow" style="display: none;">黄色接口</button>
  </div>
</div>

<script>
const wireButtons = document.querySelectorAll('.wire-btn');
const targetWires = document.querySelectorAll('.target-wire');

wireButtons.forEach(btn => {
  btn.addEventListener('click', () => {
    // 先隐藏所有目标按钮，只显示当前对应颜色的
    targetWires.forEach(target => target.style.display = 'none');
    const color = btn.dataset.color;
    document.querySelector(`.target-wire[data-match="${color}"]`).style.display = 'inline-block';
    
    // 给显示的目标按钮绑定点击校验逻辑
    const activeTarget = document.querySelector(`.target-wire[data-match="${color}"]`);
    activeTarget.addEventListener('click', () => {
      if (activeTarget.dataset.match === color) {
        btn.disabled = true;
        activeTarget.disabled = true;
        btn.style.backgroundColor = '#888';
        activeTarget.style.backgroundColor = '#888';
        alert('连接正确！');
      } else {
        alert('连接错误，重新来！');
        targetWires.forEach(target => target.style.display = 'none');
      }
    }, { once: true }); // 只触发一次点击事件
  });
});
</script>

关键逻辑说明 #

• 用display: none初始隐藏目标按钮，点击触发按钮后改为inline-block或block显示
• 用data-*属性关联触发按钮和目标按钮，方便匹配对应关系
• 可选添加按钮禁用、样式变化来标记已完成的连接，增强游戏体验

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