如何通过纯javascript单击HTML中的单选按钮显示不同的表单答案

【问题标题】：How to show a different form on click of a radio button in HTML by pure javascript如何通过纯javascript单击HTML中的单选按钮显示不同的表单
【发布时间】：2020-09-03 17:32:13
【问题描述】：

这是我的代码。我想在单击登录单选按钮时显示登录表单，并类似地显示注册单选按钮的注册表单。

我收到一个错误

_blank.html:21 未捕获的类型错误：无法读取 null 的属性“附加” 在登录用户在 HTMLInputElement.onclick

_blank.html:28 未捕获的类型错误：无法读取 null 的属性“附加” 在注册用户在 HTMLInputElement.onclick

function loginUser(logindiv){
            console.log('login');
            var newdivlogin = document.createElement('div');
            newdivlogin.innerHTML = "<label>SignUp</label><br/>"+"<input placeholder='email'/><br/>"+"<input placeholder='password'/><br/>";
            document.getElementById(logindiv).append(newdivlogin);
        }
    
        function signupUser(signupdiv){
            console.log('signup');
            var newdivsignup = document.createElement('div');
            newdivsignup.innerHTML = "<label>SignUp</label><br/>"+"<input placeholder='email'/><br/>"+"<input placeholder='password'/><br/>"+"<input placeholder='name'/><br/>";
            document.getElementById(signupdiv).append(newdivsignup);
        }

<!DOCTYPE html>
<html lang="en">

  <head>
      <meta charset="UTF-8">
      <title>Links</title>
  </head>

  <body>
      <div class="user">
          <h1>Please Login or Sign up if you are new User</h1>
          <input type="radio" id="login" name="radio" onclick="loginUser('user');" /><label>Login</label>
          <input type="radio" id="signup" name="radio" onclick="signupUser('user');" /><label>Sign Up</label><br/>
      </div>
  </body>

</html>

【问题讨论】：

在我看来，您传入的是类名 (
)，而不是 ID。但是在函数 loginUser(logindiv) 和函数 signupUser(signupdiv) 中，您调用的是 document.getElementById()，它需要一个 id 名称而不是类名称。您可能需要 document.getElementsByClassName()。见developer.mozilla.org/en-US/docs/Web/API/Document/…

标签： javascript html

【解决方案1】：

将class="user" 更改为id="user"

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Links</title>
</head>

<body>
    <div id="user">
        <h1>Please Login or Sign up if you are new User</h1>
        <input type="radio" id="login" name="radio" onclick="loginUser('user');" /><label>Login</label>
        <input type="radio" id="signup" name="radio" onclick="signupUser('user');" /><label>Sign Up</label><br/>
    </div>

    <script>
        function loginUser(logindiv){
            console.log('login');
            var newdivlogin = document.createElement('div');
            newdivlogin.innerHTML = "<label>LogIn</label><br/>"+"<input placeholder='email'/><br/>"+"<input placeholder='password'/><br/>";
            document.getElementById(logindiv).append(newdivlogin);
        }
    
        function signupUser(signupdiv){
            console.log('signup');
            var newdivsignup = document.createElement('div');
            newdivsignup.innerHTML = "<label>SignUp</label><br/>"+"<input placeholder='email'/><br/>"+"<input placeholder='password'/><br/>"+"<input placeholder='name'/><br/>";
            document.getElementById(signupdiv).append(newdivsignup);
        }

    </script>

</body>

</html>

【讨论】：

<div class="user"> 改为<div id="user">