使用getElementsByClassName触发显示

时间:2018-03-30 08:45:17

标签: javascript html css

我希望"没有帐户?" 行,以便在点击时触发.registrybox课程的显示。我写下了一些脚本,但它不起作用。脚本指定当点击没有帐户?时,.loginbox应该消失并替换为.registrybox类代码。

预先写好了这些CSS display: nonedisplay: block



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>
&#13;
&#13;
&#13;

4 个答案:

答案 0 :(得分:2)

实际上getElementsByClassName()会返回带有匹配类名的 array-like 对象,因此您需要使用{{1}来获取该元素} ...使用[0]

时,您也不需要使用.句点

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> ...

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;
}

答案 1 :(得分:0)

您的JS代码中存在一些错误。

  1. document.getElementsByClassName()只需要类名。你正在添加'。'在classname前面。这是错的。

  2. document.getElementsByClassName()返回一个元素数组。在您的情况下,您需要从此数组中选择第一个元素。因此,您需要使用[0]来获得所需的值

  3. 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>

答案 2 :(得分:0)

试试这个。

&#13;
&#13;
function displayRegistry() {
  document.getElementsByClassName('registrybox')[0].style.display = "block";
  document.getElementsByClassName('loginbox')[0].style.display = "none";
}
&#13;
.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;
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 3 :(得分:0)

如果您希望使用jquery替换,我可以使用此功能,我无法在此处执行此操作,因为我无法添加jquery

Fiddle Example