JavaScript实现登录注册表单切换时标题显示异常问题求助

问题原因梳理 #

• 标题与对应表单结构错位：登录标题放在了注册表单上方，注册标题放在了注册表单和登录表单中间，两个标题没有和对应表单绑定，切换表单时没有同步控制标题显隐，直接导致两个标题同时展示、位置偏移
• HTML语法错误：属性之间错误添加了逗号、属性值末尾多了多余引号，导致浏览器无法正确识别元素ID和样式
• JS逻辑冗余：函数内多余的onclick = 赋值完全无效，还可能污染全局变量
• 切换按钮未指定类型：默认会触发表单提交导致页面刷新，切换逻辑失效

修复后完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script>
    // 切换到注册表单
    function twofomr() {
      document.getElementById('dibba_lo').style.display = 'none';
      document.getElementById('reg_dibba').style.display = 'block';
    }

    // 切换到登录表单
    function onefomr() {
      document.getElementById('reg_dibba').style.display = 'none';
      document.getElementById('dibba_lo').style.display = 'block';
    }
  </script>
  <style>
    /* 统一表单容器样式，避免切换时位置跳动 */
    .form-container {
      max-width: 600px;
      margin: 30px auto;
      padding: 0 20px;
    }
    .form-container h2 {
      margin-bottom: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Menu</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div id="icon">
        <a id="icon" type="image" imgsrc="Save.BMP"></a>
      </div>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- 注册表单容器，默认显示 -->
  <div id="reg_dibba" class="b_dibba form-container">
    <h2 class="dibbaT">Be a part of NoobSnoop</h2>
    <form action="" class="dibba" id="regform" method="post">
      <div class="mb-3">
        <label class="form-label">What's your name? </label>
        <input type="text" name="name" class="form-control" placeholder="What do they call you?" required/>
      </div>
      <div class="mb-3">
        <label class="form-label">What's your email? </label>
        <input type="email" name="mail" class="form-control" placeholder="What do they call you?" required/>
      </div>
      <div class="mb-3">
        <label class="form-label">Set your password</label>
        <input type="password" name="piss" id="piss" class="form-control" placeholder="Set a password" required/>
      </div>
      <div class="mb-3">
        <label class="form-label">Confirm your password</label>
        <input type="password" name="piss2" id="piss2" class="form-control" placeholder="Confirm your password" required/>
      </div>
      <div class="mb-3">
        <div id="cnfrmpass"></div>
      </div>
      <div class="mb-3">
        <button type="submit" name="sbt" class="btn btn-primary mb-3"> Submit </button>
      </div>
      <div class="mb-3">
        <button type="button" onclick="onefomr()" class="btn btn-primary mb-3"> Login </button>
      </div>
    </form>
  </div>

  <!-- 登录表单容器，默认隐藏 -->
  <div id="dibba_lo" class="m_dibba form-container" style="display: none;">
    <h2 class="dibbaT">Quick get in !</h2>
    <form action="" class="dibba_lo" id="formlogin" method="post">
      <div class="mb-3">
        <label class="form-label">What's your email? </label>
        <input type="email" name="mail" class="form-control" placeholder="What your email address?" required/>
      </div>
      <div class="mb-3">
        <label class="form-label">Enter your password</label>
        <input type="password" name="piss_m" class="form-control" placeholder="Enter your password" required/>
      </div>
      <div class="mb-3">
        <button type="submit" name="btnlog" class="btn btn-primary mb-3"> Take me In </button>
      </div>
      <div class="mb-3">
        <button type="button" onclick="twofomr()" class="btn btn-primary mb-3"> Register </button>
      </div>
    </form>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>

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