3

I want the "Dont have an account?" line to trigger the display of .registrybox class when clicked. I have written down some script and it does not function. Script specifies that when Dont have an account? is clicked, .loginbox should disappear and be replaced w/ the .registrybox class code.

Those CSS display: none and display: block are written beforehand.

function displayRegistry() {
  document.getElementsByClassName('.registrybox').style.display = "block";
  document.getElementsByClassName('.loginbox').style.display = "none";
}
.loginbox {
  width: 320px;
  height: 420px;
  background-color: ;
  color: #fff;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 50px 20px;
  display: block;
}


}
h1 {
  margin: 0;
  padding: 0 0 20px;
  text-align: center;
  font-size: 22px;
}
.loginbox p {
  margin: 0;
  padding: 0;
  font-weight: bold;
}
.loginbox input {
  width: 100%;
  margin-bottom: 20px;
}
.loginbox input[type="text"],
[type="password"] {
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
  height: 40px;
  color: #fff;
  font-size: 16px;
}
.loginbox input[type="submit"] {
  border: none;
  outline: 0;
  height: 40px;
  background: #fb2525;
  color: #fff;
  font-size: 18px;
  border-radius: 20px;
}
.loginbox input[type="submit"]:hover {
  cursor: pointer;
  background: red;
  color: #000;
}
.loginbox a {
  text-decoration: none;
  color: darkgrey;
  font-size: 15px;
  line-height: 20px;
}
.loginbox a:hover {
  color: red;
}
.registrybox {
  width: 320px;
  height: 420px;
  color: #fff;
  top: 10%;
  left: 20%;
  position: absolute;
  transform: trnaslate(-50%, -50%);
}
.registrybox p {
  font-weight: bold;
  margin: 0;
  padding: 0;
}
.registrybox input {
  width: 100%;
  margin-bottom: 20px;
}
.registrybox input[type="text"],
[type="password"] {
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
  height: 40px;
  color: #fff;
  font-size: 16px;
}
.registrybox input[type="submit"] {
  border: none;
  outline: 0;
  height: 40px;
  color: #fff;
  background: #fb2525;
  font-size: 18px;
  border-radius: 20px;
}
.registrybox input[type="submit"]:hover {
  cursor: pointer;
  background: red;
  color: #000;
}
.registrybox a {
  text-decoration: none;
  color: darkgrey;
  line-height: 20px;
  font-size: 15px;
}
.registrybox {
  display: none;
}
select {
  padding: 10px;
  border: none;
  border-radius: 10px;
}
<div class="loginbox">
  <h1>Login Here</h1>
  <form>
    <p>Username</p>
    <input type="text" name="" placeholder="Enter Username">
    <p>Password</p>
    <input type="password" name="" placeholder="Enter Password">
    <input type="submit" name="" value="Login">
    <a href="#">Forgot password?</a><br>
    <a href="#" onclick="displayRegistry()">Dont have an account?</a>
  </form>
</div>
<div class="registrybox">
  <h1>Registration</h1>
  <form>
    <p>Username</p>
    <input type="text" placeholder="Enter Username">
    <p>E-mail</p>
    <input type="text" placeholder="Enter E-mail">
    <p>Password</p>
    <input type="password" placeholder="Enter password">
    <p>Repeat Password</p>
    <input type="password" placeholder="Confirm password">
    <input type="submit" value="Sign up">
    <a hred="#">Already registered?</a>
    <select name="dobmonth">
      <option>month</option>
      <option value="january">January</option>
    </select>
    <select name="dobyear">
      <option>Year</option>
      <option value="2000">2006</option>
      <option value="2000">2005</option>
      <option value="2000">2004</option>
      <option value="2000">2003</option>
      <option value="2000">2002</option>
      <option value="2000">2001</option>
      <option value="2000">2000</option>
      <option value="2000">1999</option>
    </select>
  </form>
</div>

Improve this question

4 Answers 4

Reset to default
2

Actually getElementsByClassName() returns an array-like object with matched class name, so you will need to get the element by using [0]...Also you don't need to use . period when using getElementsByClassName()

function displayRegistry() {
  document.getElementsByClassName('registrybox')[0].style.display = "block";
  document.getElementsByClassName('loginbox')[0].style.display = "none";
}
function displayLogin() {
  document.getElementsByClassName('registrybox')[0].style.display = "none";
  document.getElementsByClassName('loginbox')[0].style.display = "block";
}
.loginbox {
  width: 320px;
  height: 420px;
  background-color: ;
  color: #fff;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 50px 20px;
  display: block;
}


}
h1 {
  margin: 0;
  padding: 0 0 20px;
  text-align: center;
  font-size: 22px;
}
.loginbox p {
  margin: 0;
  padding: 0;
  font-weight: bold;
}
.loginbox input {
  width: 100%;
  margin-bottom: 20px;
}
.loginbox input[type="text"],
[type="password"] {
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
  height: 40px;
  color: #fff;
  font-size: 16px;
}
.loginbox input[type="submit"] {
  border: none;
  outline: 0;
  height: 40px;
  background: #fb2525;
  color: #fff;
  font-size: 18px;
  border-radius: 20px;
}
.loginbox input[type="submit"]:hover {
  cursor: pointer;
  background: red;
  color: #000;
}
.loginbox a {
  text-decoration: none;
  color: darkgrey;
  font-size: 15px;
  line-height: 20px;
}
.loginbox a:hover {
  color: red;
}
.registrybox {
  width: 320px;
  height: 420px;
  color: #fff;
  top: 10%;
  left: 20%;
  position: absolute;
  transform: trnaslate(-50%, -50%);
}
.registrybox p {
  font-weight: bold;
  margin: 0;
  padding: 0;
}
.registrybox input {
  width: 100%;
  margin-bottom: 20px;
}
.registrybox input[type="text"],
[type="password"] {
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
  height: 40px;
  color: #fff;
  font-size: 16px;
}
.registrybox input[type="submit"] {
  border: none;
  outline: 0;
  height: 40px;
  color: #fff;
  background: #fb2525;
  font-size: 18px;
  border-radius: 20px;
}
.registrybox input[type="submit"]:hover {
  cursor: pointer;
  background: red;
  color: #000;
}
.registrybox a {
  text-decoration: none;
  color: darkgrey;
  line-height: 20px;
  font-size: 15px;
}
.registrybox {
  display: none;
}
select {
  padding: 10px;
  border: none;
  border-radius: 10px;
}
<div class="loginbox">
  <h1>Login Here</h1>
  <form>
    <p>Username</p>
    <input type="text" name="" placeholder="Enter Username">
    <p>Password</p>
    <input type="password" name="" placeholder="Enter Password">
    <input type="submit" name="" value="Login">
    <a href="#">Forgot password?</a><br>
    <a href="#" onclick="displayRegistry()">Dont have an account?</a>
  </form>
</div>
<div class="registrybox">
  <h1>Registration</h1>
  <form>
    <p>Username</p>
    <input type="text" placeholder="Enter Username">
    <p>E-mail</p>
    <input type="text" placeholder="Enter E-mail">
    <p>Password</p>
    <input type="password" placeholder="Enter password">
    <p>Repeat Password</p>
    <input type="password" placeholder="Confirm password">
    <input type="submit" value="Sign up">
    <a hred="#" onclick="displayLogin()">Already registered?</a>
    <select name="dobmonth">
      <option>month</option>
      <option value="january">January</option>
    </select>
    <select name="dobyear">
      <option>Year</option>
      <option value="2000">2006</option>
      <option value="2000">2005</option>
      <option value="2000">2004</option>
      <option value="2000">2003</option>
      <option value="2000">2002</option>
      <option value="2000">2001</option>
      <option value="2000">2000</option>
      <option value="2000">1999</option>
    </select>
  </form>
</div>

Or you can use querySelector...

function displayRegistry() {
  document.querySelector('.registrybox').style.display = "block";
  document.querySelector('.loginbox').style.display = "none";
}
.loginbox {
  width: 320px;
  height: 420px;
  background-color: ;
  color: #fff;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 50px 20px;
  display: block;
}


}
h1 {
  margin: 0;
  padding: 0 0 20px;
  text-align: center;
  font-size: 22px;
}
.loginbox p {
  margin: 0;
  padding: 0;
  font-weight: bold;
}
.loginbox input {
  width: 100%;
  margin-bottom: 20px;
}
.loginbox input[type="text"],
[type="password"] {
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
  height: 40px;
  color: #fff;
  font-size: 16px;
}
.loginbox input[type="submit"] {
  border: none;
  outline: 0;
  height: 40px;
  background: #fb2525;
  color: #fff;
  font-size: 18px;
  border-radius: 20px;
}
.loginbox input[type="submit"]:hover {
  cursor: pointer;
  background: red;
  color: #000;
}
.loginbox a {
  text-decoration: none;
  color: darkgrey;
  font-size: 15px;
  line-height: 20px;
}
.loginbox a:hover {
  color: red;
}
.registrybox {
  width: 320px;
  height: 420px;
  color: #fff;
  top: 10%;
  left: 20%;
  position: absolute;
  transform: trnaslate(-50%, -50%);
}
.registrybox p {
  font-weight: bold;
  margin: 0;
  padding: 0;
}
.registrybox input {
  width: 100%;
  margin-bottom: 20px;
}
.registrybox input[type="text"],
[type="password"] {
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
  height: 40px;
  color: #fff;
  font-size: 16px;
}
.registrybox input[type="submit"] {
  border: none;
  outline: 0;
  height: 40px;
  color: #fff;
  background: #fb2525;
  font-size: 18px;
  border-radius: 20px;
}
.registrybox input[type="submit"]:hover {
  cursor: pointer;
  background: red;
  color: #000;
}
.registrybox a {
  text-decoration: none;
  color: darkgrey;
  line-height: 20px;
  font-size: 15px;
}
.registrybox {
  display: none;
}
select {
  padding: 10px;
  border: none;
  border-radius: 10px;
}
<div class="loginbox">
  <h1>Login Here</h1>
  <form>
    <p>Username</p>
    <input type="text" name="" placeholder="Enter Username">
    <p>Password</p>
    <input type="password" name="" placeholder="Enter Password">
    <input type="submit" name="" value="Login">
    <a href="#">Forgot password?</a><br>
    <a href="#" onclick="displayRegistry()">Dont have an account?</a>
  </form>
</div>
<div class="registrybox">
  <h1>Registration</h1>
  <form>
    <p>Username</p>
    <input type="text" placeholder="Enter Username">
    <p>E-mail</p>
    <input type="text" placeholder="Enter E-mail">
    <p>Password</p>
    <input type="password" placeholder="Enter password">
    <p>Repeat Password</p>
    <input type="password" placeholder="Confirm password">
    <input type="submit" value="Sign up">
    <a hred="#">Already registered?</a>
    <select name="dobmonth">
      <option>month</option>
      <option value="january">January</option>
    </select>
    <select name="dobyear">
      <option>Year</option>
      <option value="2000">2006</option>
      <option value="2000">2005</option>
      <option value="2000">2004</option>
      <option value="2000">2003</option>
      <option value="2000">2002</option>
      <option value="2000">2001</option>
      <option value="2000">2000</option>
      <option value="2000">1999</option>
    </select>
  </form>
</div>

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

This worked, but I tried to use the same drill over the Already registered? line from the registry box. Did not pay off. Any idea how to resolve that too?
I created another function displayLogin and appended onclick="displayLogin() code to the Already registered line. Just rehashed whatever I had written for displayRegistry with opposite effects (Registry disappearing and being replaced by the login form).
0

You have some mistakes in your JS code.

  1. document.getElementsByClassName() requires only the class name. You are adding '.' in front of the classname. This wrong.

  2. document.getElementsByClassName() returns an array of elements. In your case, you need to select first element from this array. So you need to use [0] to get the desired value

function displayRegistry() {
  document.getElementsByClassName('registrybox')[0].style.display = "block";
  document.getElementsByClassName('loginbox')[0].style.display = "none";
}
.loginbox {
  width: 320px;
  height: 420px;
  background-color: ;
  color: #fff;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 50px 20px;
  display: block;
}


}
h1 {
  margin: 0;
  padding: 0 0 20px;
  text-align: center;
  font-size: 22px;
}
.loginbox p {
  margin: 0;
  padding: 0;
  font-weight: bold;
}
.loginbox input {
  width: 100%;
  margin-bottom: 20px;
}
.loginbox input[type="text"],
[type="password"] {
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
  height: 40px;
  color: #fff;
  font-size: 16px;
}
.loginbox input[type="submit"] {
  border: none;
  outline: 0;
  height: 40px;
  background: #fb2525;
  color: #fff;
  font-size: 18px;
  border-radius: 20px;
}
.loginbox input[type="submit"]:hover {
  cursor: pointer;
  background: red;
  color: #000;
}
.loginbox a {
  text-decoration: none;
  color: darkgrey;
  font-size: 15px;
  line-height: 20px;
}
.loginbox a:hover {
  color: red;
}
.registrybox {
  width: 320px;
  height: 420px;
  color: #fff;
  top: 10%;
  left: 20%;
  position: absolute;
  transform: trnaslate(-50%, -50%);
}
.registrybox p {
  font-weight: bold;
  margin: 0;
  padding: 0;
}
.registrybox input {
  width: 100%;
  margin-bottom: 20px;
}
.registrybox input[type="text"],
[type="password"] {
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
  height: 40px;
  color: #fff;
  font-size: 16px;
}
.registrybox input[type="submit"] {
  border: none;
  outline: 0;
  height: 40px;
  color: #fff;
  background: #fb2525;
  font-size: 18px;
  border-radius: 20px;
}
.registrybox input[type="submit"]:hover {
  cursor: pointer;
  background: red;
  color: #000;
}
.registrybox a {
  text-decoration: none;
  color: darkgrey;
  line-height: 20px;
  font-size: 15px;
}
.registrybox {
  display: none;
}
select {
  padding: 10px;
  border: none;
  border-radius: 10px;
}
<div class="loginbox">

  <h1>Login Here</h1>
  <form>
    <p>Username</p>
    <input type="text" name="" placeholder="Enter Username">
    <p>Password</p>
    <input type="password" name="" placeholder="Enter Password">
    <input type="submit" name="" value="Login">
    <a href="#">Forgot password?</a><br>
    <a href="#" onclick="displayRegistry()">Dont have an account?</a>
  </form>
</div>

<div class="registrybox">
  <h1>Registration</h1>
  <form>
    <p>Username</p>
    <input type="text" placeholder="Enter Username">
    <p>E-mail</p>
    <input type="text" placeholder="Enter E-mail">
    <p>Password</p>
    <input type="password" placeholder="Enter password">
    <p>Repeat Password</p>
    <input type="password" placeholder="Confirm password">
    <input type="submit" value="Sign up">
    <a hred="#">Already registered?</a>
    <select name="dobmonth">
                        <option>month</option>
                        <option value="january">January</option>
                    </select>
    <select name="dobyear">
                        <option>Year</option>
                        <option value="2000">2006</option>
                         <option value="2000">2005</option>
                          <option value="2000">2004</option>
                           <option value="2000">2003</option>
                            <option value="2000">2002</option>
                             <option value="2000">2001</option>
                              <option value="2000">2000</option>
                               <option value="2000">1999</option>
                    </select>
  </form>
</div>

Improve this answer

Comments

0

Try this.

function displayRegistry() {
  document.getElementsByClassName('registrybox')[0].style.display = "block";
  document.getElementsByClassName('loginbox')[0].style.display = "none";
}
.loginbox {
  width: 320px;
  height: 420px;
  background-color: ;
  color: #fff;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 50px 20px;
  display: block;
}


}
h1 {
  margin: 0;
  padding: 0 0 20px;
  text-align: center;
  font-size: 22px;
}
.loginbox p {
  margin: 0;
  padding: 0;
  font-weight: bold;
}
.loginbox input {
  width: 100%;
  margin-bottom: 20px;
}
.loginbox input[type="text"],
[type="password"] {
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
  height: 40px;
  color: #fff;
  font-size: 16px;
}
.loginbox input[type="submit"] {
  border: none;
  outline: 0;
  height: 40px;
  background: #fb2525;
  color: #fff;
  font-size: 18px;
  border-radius: 20px;
}
.loginbox input[type="submit"]:hover {
  cursor: pointer;
  background: red;
  color: #000;
}
.loginbox a {
  text-decoration: none;
  color: darkgrey;
  font-size: 15px;
  line-height: 20px;
}
.loginbox a:hover {
  color: red;
}
.registrybox {
  width: 320px;
  height: 420px;
  color: #fff;
  top: 10%;
  left: 20%;
  position: absolute;
  transform: trnaslate(-50%, -50%);
}
.registrybox p {
  font-weight: bold;
  margin: 0;
  padding: 0;
}
.registrybox input {
  width: 100%;
  margin-bottom: 20px;
}
.registrybox input[type="text"],
[type="password"] {
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
  height: 40px;
  color: #fff;
  font-size: 16px;
}
.registrybox input[type="submit"] {
  border: none;
  outline: 0;
  height: 40px;
  color: #fff;
  background: #fb2525;
  font-size: 18px;
  border-radius: 20px;
}
.registrybox input[type="submit"]:hover {
  cursor: pointer;
  background: red;
  color: #000;
}
.registrybox a {
  text-decoration: none;
  color: darkgrey;
  line-height: 20px;
  font-size: 15px;
}
.registrybox {
  display: none;
}
select {
  padding: 10px;
  border: none;
  border-radius: 10px;
}
<div class="loginbox">

  <h1>Login Here</h1>
  <form>
    <p>Username</p>
    <input type="text" name="" placeholder="Enter Username">
    <p>Password</p>
    <input type="password" name="" placeholder="Enter Password">
    <input type="submit" name="" value="Login">
    <a href="#">Forgot password?</a><br>
    <a href="#" onclick="displayRegistry()">Dont have an account?</a>
  </form>
</div>

<div class="registrybox">
  <h1>Registration</h1>
  <form>
    <p>Username</p>
    <input type="text" placeholder="Enter Username">
    <p>E-mail</p>
    <input type="text" placeholder="Enter E-mail">
    <p>Password</p>
    <input type="password" placeholder="Enter password">
    <p>Repeat Password</p>
    <input type="password" placeholder="Confirm password">
    <input type="submit" value="Sign up">
    <a hred="#">Already registered?</a>
    <select name="dobmonth">
                        <option>month</option>
                        <option value="january">January</option>
                    </select>
    <select name="dobyear">
                        <option>Year</option>
                        <option value="2000">2006</option>
                         <option value="2000">2005</option>
                          <option value="2000">2004</option>
                           <option value="2000">2003</option>
                            <option value="2000">2002</option>
                             <option value="2000">2001</option>
                              <option value="2000">2000</option>
                               <option value="2000">1999</option>
                    </select>
  </form>
</div>

Improve this answer

Comments

0

If you want to alternative with jquery u can use this i can't do it here because i can't add jquery

Fiddle Example

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.