How do i remove an element an element from my web page when a user clicks on it and display another element at it's place using javascript

Question

I have a signIn form and a register form. I want to that when a user clicks on register button the signIn form should be removed or disappear and instead register form should be there in it'place.

Html page

<body>

<nav class="navbar navbar-inverse" id="auto">
    <div class="container">
        <div class="navbar-header">
            <!-- <i class="fa fa-beer" aria-hidden="true" id="logo"></i> -->
            <a class="navbar-brand">Work Planner</a>

        </div>
    </div>

</nav> 
<div class="container">
    <div class="row">
        <div class="col-lg-12">
        <div id="content">
        <!-- Sign In Form -->
        <div id="signIn-form">
        <form action="www.workplanner.com">
            <h3>Sign In</h3>
            <div>
            <label><input type="email" name="username" placeholder="user@domain.com"></label>
            <!-- <hr> -->
            </div>
            <div>
            <label><input type="password" name="username" placeholder="password"></label>
            <!-- <hr> -->
            </div>
            <div>
                <button  class="btn">Log in</button>    
                <p>New User?   <a href="#"  id="register">Register</a></p>
            </div>

        </form>
        </div>

        <!--  Registeration Form -->
        <div id="register-form">
        <form action="www.workplanner.com">
            <h3>Register</h3>
            <div>
            <label><input type="text" name="name" placeholder="Your Name"></label>
            <!-- <hr> -->
            <div>
            <label><input type="email" name="email" placeholder="user@domain.com"></label>
            <!-- <hr> -->
            </div>
            <div>
            <label><input type="password" name="password" placeholder="password"></label>
            <!-- <hr> -->
            </div>
            <div>
                <button class="btn">Register</button>   
                <p>Returning User? <a href="#" id="signIn">Log in</a> </p>
            </div>
        </form>
        </div>
    </div>
    </div>
    </div>
</div>
<script src="signIn.js" type="text/javascript"></script>

JS file

var register-btn = document.getElementById("register");
var signIn-btn = document.getElementById("signIn");
var signIn-form = document.getElementById("signIn-form");
var register-form = document.getElementById("register-form");

register-btn.addEventListener('click', function() {
  signIn-form.style.display = "none";
  register-form.style.display = "block";
});

signIn-btn.addEventListener('click', function() {
  register-form.style.display = "none";
  signIn-form.style.display = "block";
});

I know the display property just makes the element disappear or appear, but this is not working.

First of all remove `-` from variable name, you can use PascalCase, camelCase — Satpal, Sep 21 '17 at 08:23
`but this is not working.` - Please check your console, there has to be errors shown. — Nope, Sep 21 '17 at 08:25

Philip · Accepted Answer · 2017-09-21T08:30:49.740

The answer is: don't use kebab case(https://stackoverflow.com/a/17820138/6429774) for variable names.

var registerBtn = document.getElementById("register");
var signInBtn = document.getElementById("signIn");  
var signInForm = document.getElementById("signIn-form"); 
var registerForm = document.getElementById("register-form");

registerBtn.addEventListener('click', function(){
  signInForm.style.display = "none";
  registerForm.style.display = "block";
});

signInBtn.addEventListener('click', function(){
  registerForm.style.display = "none";
  signInForm.style.display = "block"; 
});

<nav class="navbar navbar-inverse" id="auto">
    <div class="container">
        <div class="navbar-header">
            <!-- <i class="fa fa-beer" aria-hidden="true" id="logo"></i> -->
            <a class="navbar-brand">Work Planner</a>

        </div>
    </div>

</nav>
<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <div id="content">
                <!-- Sign In Form -->
                <div id="signIn-form">
                    <form action="www.workplanner.com">
                        <h3>Sign In</h3>
                        <div>
                            <label><input type="email" name="username" placeholder="user@domain.com"></label>
                            <!-- <hr> -->
                        </div>
                        <div>
                            <label><input type="password" name="username" placeholder="password"></label>
                            <!-- <hr> -->
                        </div>
                        <div>
                            <button class="btn">Log in</button>
                            <p>New User?
                                <a href="#" id="register">Register</a>
                            </p>
                        </div>

                    </form>
                </div>

                <!--  Registeration Form -->
                <div id="register-form">
                    <form action="www.workplanner.com">
                        <h3>Register</h3>
                        <div>
                            <label><input type="text" name="name" placeholder="Your Name"></label>
                            <!-- <hr> -->
                            <div>
                                <label><input type="email" name="email" placeholder="user@domain.com"></label>
                                <!-- <hr> -->
                            </div>
                            <div>
                                <label><input type="password" name="password" placeholder="password"></label>
                                <!-- <hr> -->
                            </div>
                            <div>
                                <button class="btn">Register</button>
                                <p>Returning User?
                                    <a href="#" id="signIn">Log in</a>
                                </p>
                            </div>
                    </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

thanks, I will make sure from now onward I don't mess up with the casing. — vyasriday, Sep 21 '17 at 08:39
You welcome. Here is a good thread about variable naming: https://stackoverflow.com/questions/1661197/what-characters-are-valid-for-javascript-variable-names — Philip, Sep 21 '17 at 08:43

How do i remove an element an element from my web page when a user clicks on it and display another element at it's place using javascript

1 Answers1