How to show a different form on click of a radio button in HTML by pure javascript
Question
Here is my code. I want to display the login form on click of the login radio button and similarly signup form for sign up radio button.
I am getting an error
_blank.html:21 Uncaught TypeError: Cannot read property 'append' of null at loginUser at HTMLInputElement.onclick
_blank.html:28 Uncaught TypeError: Cannot read property 'append' of null at signupUser at 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>
1 answers
solution1
0 2020-09-02 15:52:37
Change class="user" to 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to check a radio button with JavaScript Pure? Use Form id=value
How to find the value of a radio button with pure javascript?
How to Show and Hide HTML Form based on Radio Button
How to check the Radio button validation using javascript in HTML form
Javascript PDF form Radio Button Show/Hide
How to create click button in pure JavaScript?
Click button in form 1: change value of hidden input in form 2 (pure javascript)
HTML and JavaScript: different values depending on the radio button
How to display elements, refering to the selected radio button ? using pure javascript
how to open different form on different radio button
Related Tags