How to span active on click in javascript

I'm trying to make a span move into another span on click. When I use the function in the onclick event in JavaScript, it's not working. But, when I use the same function in html with a tag, it works. .....................................................................

Anything wrong with my code or what?

var LoginForm = document.getElementById("LoginForm");
var RegisterForm = document.getElementById("RegisterForm");
var Indicator = document.getElementById("Indicator");

function register() {

  RegisterForm.style.transform = "translateX(0px)";
  LoginForm.style.transform = "translateX(0px)";
}

function login() {

  RegisterForm.style.transform = "translateX(300px)";
  LoginForm.style.transform = "translateX(300px)";
}

.account-page {
  padding: 50px 0;
  background: radial-gradient(#fff, #ffd6d6);
}

.form-container {
  background: #fff;
  width: 300px;
  height: 400px;
  position: relative;
  text-align: center;
  padding: 20px 0;
  margin: auto;
  box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.1);
}

.form-container span {
  font-weight: bold;
  padding: 0 10px;
  color: #555;
  cursor: pointer;
  width: 100px;
  display: inline-block;
}

.form-btn {
  display: inline-block;
}

.form-container form {
  max-width: 300px;
  padding: 0 20px;
  position: absolute;
  top: 130px;
}

form input {
  width: 100%;
  height: 30px;
  margin: 10px 0;
  padding: 0 10px;
  border: 1px solid #ccc;
}

form .btn {
  width: 100%;
  border: none;
  cursor: pointer;
  margin: 10px 0;
}

form .btn:focus {
  outline: none;
}

#LoginForm {
  left: -300px;
}

#RegisterForm {
  left: 0;
}

form a {
  font-size: 12px;
}

#Indicator {
  width: 100px;
  height: 3px;
  border: none;
  background: #ff523b;
  margin: 8px;
  transform: scaleX(100px);
}

<div class="account-page">
  <div class="container">
    <div class="row">
      <div class="col-2">
        <img src="Fn_Img/images/women 2245 x 1587 px).png" width="100%">
      </div>
      <div class="col-2">
        <div class="form-container">
          <div class="form-btn">
            <span onclick="login()">Login</span>
            <span onclick="register()">Register</span>
            <hr id="Indicator">
          </div>
          <form id="LoginForm">
            <input type="text" placeholder="Username">
            <input type="password" placeholder="Password">
            <button type="submit" class="btn">Login</button>
            <a href="ForgetForm">Forget Password</a>
          </form>
          <form id="RegisterForm">
            <input type="text" placeholder="Username">
            <input type="password" placeholder="Password">
            <input type="email" placeholder="Email">
            <button type="submit" class="btn">Register</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW