javascript - 如何从下拉菜单调用 HTML 表单

Question

我正在从按钮切换到下拉菜单，供用户登录或创建帐户。下面的脚本可以正常使用按钮。想知道如何从如下定义的下拉菜单中调用脚本。谢谢。

<script>
    function openCreateAccountForm() {
        document.getElementById("createAccountForm").style.display = "block";        
    }

    function closeCreateAccountForm() {
        document.getElementById("createAccountForm").style.display = "none";
    }
    function openLoginForm() {
        document.getElementById("loginForm").style.display = "block";
    }

    function closeLoginForm() {
        document.getElementById("loginForm").style.display = "none";
    }
</script>
<div class="dropdown">
    <button class="dropbtn">Hello</button>
    <div id="notLoggedInOpts" class="dropdown-content" >
        <a href="#">Login 1</a>
        <a href="#">Create Account 2</a>
    </div>
</div>

Answer 1

根据您的需要，您甚至不需要 javascript。

您可以使用 id 和 # 链接到页面上的内部元素。然后您可以使用 :target 和 CSS 来显示所需的表单。

#login,
#register {
  display: none;
  width: 40%;
  float: right;
}

#login:target,
#register:target {
  display: block;
}

.dropdown {
  width: 60%;
  float: left;
}

<div class="dropdown">
  <button class="dropbtn">Hello</button>
  <div id="notLoggedInOpts" class="dropdown-content">
    <a href="#login">Login 1</a>
    <a href="#register">Create Account 2</a>
  </div>
</div>
<div id="login">
  Login Form Here
  <a href="#">Close</a>
</div>
<div id="register">
  Register Form Here
  <a href="#">Close</a>
</div>

如果您仍然想走 javascript 路线，我会使用不显眼的 javascript 并生成事件监听器。

function showLoginRegisterForm(event) {
  //Get the # target from the link
  var target = event.target.getAttribute('href');
  //Optional : hide the other form
  document.querySelector("#forms > div:not(" + target + ")").style.display = "none";
  //Shoe the target form
  document.querySelector(target).style.display = "block";
}

function hideLoginRegisterForm(event) {
  //Get the # target from the link
  var target = event.target.getAttribute('href');  
  //Hide the target form
  document.querySelector(target).style.display = "none";
}

//Get our button to show forms 
var formButtons = document.querySelectorAll("#notLoggedInOpts a");

//Add Event Listeners to show
for (var i = 0; i < formButtons.length; i++) {
  formButtons[i].addEventListener("click", showLoginRegisterForm);
}

//Get our button to hide forms 
var formHideButtons = document.querySelectorAll("#forms a");

//Add Event Listeners to hide
for (var i = 0; i < formHideButtons.length; i++) {
  formHideButtons[i].addEventListener("click", hideLoginRegisterForm);
}

#login,
#register {
  display: none;
  width: 40%;
  float: right;
}

.dropdown {
  width: 60%;
  float: left;
}

<div class="dropdown">
  <button class="dropbtn">Hello</button>
  <div id="notLoggedInOpts" class="dropdown-content">
    <a href="#login">Login 1</a>
    <a href="#register">Create Account 2</a>
  </div>
</div>
<div id="forms">
  <div id="login">
    Login Form Here
    <a href="#login" class="close">Close</a>
  </div>
  <div id="register">
    Register Form Here
    <a href="#register" class="close">Close</a>
  </div>
</div>