HTML与JS按钮交互问题：按钮点击消失及弹窗按钮需求

修改后的HTML代码 #

<div id="container">
  <h1 class="top-text">Traffic Control System</h1>
  <form id="form">
    <div id="container1">
      <img src="images/MTF.png" alt="mtff" class="MTF" />
      <form id="form1">
        <div></div>
        <br>
      </form>
      <hr class="Line">

      <button id="Stop" type="button">Stop Traffic</button>
      <button id="Slow" type="button" onclick="toggleRadiusButton()">Slow Traffic</button>
      <!-- 给RadiusButton加type="button"，避免提交表单导致消失 -->
      <button id="RadiusButton" style="display: none;" type="button">Radius</button>
      <!-- 添加两个默认隐藏的弹出按钮 -->
      <button id="SlowBtn1" style="display: none;" type="button">慢速选项1</button>
      <button id="SlowBtn2" style="display: none;" type="button">慢速选项2</button>
      <button id="Clear" type="button">Clear Traffic</button>
      <button id="Active" type="button">Active Traffic</button>
      <button id="close">EXIT</button>
    </div>
  </form>
</div>

修改后的JS代码 #

function toggleRadiusButton() {
  const slowButton = document.getElementById('Slow');
  const radiusButton = document.getElementById('RadiusButton');
  const slowBtn1 = document.getElementById('SlowBtn1');
  const slowBtn2 = document.getElementById('SlowBtn2');

  // 显示RadiusButton和两个弹出按钮
  radiusButton.style.display = 'block';
  slowBtn1.style.display = 'block';
  slowBtn2.style.display = 'block';
  slowButton.disabled = true;
}

// 页面加载完成后绑定Clear和Active的点击事件
document.addEventListener('DOMContentLoaded', function() {
  const clearBtn = document.getElementById('Clear');
  const activeBtn = document.getElementById('Active');
  const slowButton = document.getElementById('Slow');
  const radiusButton = document.getElementById('RadiusButton');
  const slowBtn1 = document.getElementById('SlowBtn1');
  const slowBtn2 = document.getElementById('SlowBtn2');

  // 点击Clear隐藏弹出的两个按钮，恢复Slow可用，隐藏RadiusButton
  clearBtn.addEventListener('click', function() {
    slowBtn1.style.display = 'none';
    slowBtn2.style.display = 'none';
    radiusButton.style.display = 'none';
    slowButton.disabled = false;
  });

  // Active按钮做同样的处理
  activeBtn.addEventListener('click', function() {
    slowBtn1.style.display = 'none';
    slowBtn2.style.display = 'none';
    radiusButton.style.display = 'none';
    slowButton.disabled = false;
  });
});

关键修改说明 #

• 解决RadiusButton点击消失问题：原代码里RadiusButton没设type="button"，浏览器默认把它当成submit按钮，点击会提交表单导致页面刷新，按钮就“消失”了。加上type="button"就不会触发表单提交。
• 实现Slow按钮弹出两个按钮：新增两个默认隐藏的按钮，在toggleRadiusButton函数里把它们的display设为block显示出来。
• Clear/Active隐藏弹出按钮：通过DOMContentLoaded事件给这两个按钮绑定点击事件，点击时隐藏弹出的两个按钮，同时恢复Slow按钮的可用状态，也把RadiusButton一起隐藏（可根据需求调整是否保留显示）。
• 表单按钮类型调整：把原来的submit类型改成button，避免误提交表单导致页面刷新，如果确实需要表单提交功能，可以保留submit，但要在点击事件里用event.preventDefault()阻止默认刷新行为。

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