Activate the display by utilizing the getElementsByClassName method

In my design, I'd like to have the "Don't have an account?" line trigger the display of the .registrybox class when clicked. However, the script I've written doesn't seem to be working as intended. The script is meant to hide the .loginbox and replace it with the code for the .registrybox when the "Don't have an account?" link is clicked.

I've already defined the CSS properties: display: none; and display: block; in advance.


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

/* More CSS styles here */

.registrybox {
    width: 320px;
    height: 420px;
    color: #fff;
    top: 10%;
    left: 20%;
    position: absolute;
    transform: trnaslate(-50%, -50%);
}

/* Additional CSS styles for registry box */

<select>
    padding: 10px;
    border: none;
    border-radius: 10px;
</select>


<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()">Don't 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="2006">2006</option>
            <option value="2005">2005</option>
            <option value="2004">2004</option>
            <option value="2003">2003</option>
            <option value="2002">2002</option>
            <option value="2001">2001</option>
            <option value="2000">2000</option>
            <option value="1999">1999</option>
        </select>
    </form>
</div>

javascripthtmlcss

Answer №1

When using getElementsByClassName(), keep in mind that it returns an object that is array-like and contains matched class names. To access the specific element, you will need to use [0]. Additionally, there is no need for a period (.) when calling 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>

Another alternative is to utilize 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="#" 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>

Answer №2

Your JavaScript code contains a few errors that need to be corrected.

  1. When using document.getElementsByClassName(), you should only provide the class name without adding '.' in front of it.

  2. The document.getElementsByClassName() method returns an array of elements, so make sure to access the specific element you want by using [0] to select the first element from the array.

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>

Answer №3

Give this a shot!

function showRegistry() {
  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;
}
/* Remaining CSS styles unchanged for brevity */

<div class="loginbox">

  <h1>Login Here</h1>
  <form>
    <p>Username</p>
    <input type="text" name="" placeholder="Enter Username">
    /* Form elements omitted for conciseness */
  </form>
</div>

<div class="registrybox">
  <h1>Registration</h1>
  <form>
    <p>Username</p>
    <input type="text" placeholder="Enter Username">
     /* Additional form fields not shown for clarity */
    <select name="dobmonth">
                        <option>month</option>
                        <option value="january">January</option>
                    </select>
    <select name="dobyear">
                        <option>Year</option>
                         /* Options for select dropdown hidden for space */    
                    </select>
  </form>
</div>

Answer №4

If you are looking for an alternative to using jquery, you can try implementing it on your own. Unfortunately, I am unable to provide the code here as I am not able to include jquery.

Check out this Fiddle Example

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Waiting for a method to finish in Node.js/Javascript

Currently, I am in the process of creating a trade bot for Steam. However, I have encountered an issue where the for-loop does not wait for the method inside it to finish before moving on to the next iteration. As a result, the code is not functioning as i ...

javascriptnode.jsfor-loopmethodswait

Dynamic Loading of Multiple Scripts on a Webpage with Dependencies in JavaScript

I am currently working on developing a page constructor entirely using JavaScript. The issue arises when I dynamically add two scripts to the page that are dependent on each other. For instance, in this scenario, I am loading jQuery from a CDN, and in the ...

javascript

Express.js post method malfunctioning for BMI calculation

Currently, I am working on a BMI calculator application in JavaScript as part of my practice. The app is supposed to take two inputs - weight and height, calculate the BMI, and display the result on the web page. However, after inputting the data and submi ...

javascriptexpresspost

Display the output of JSON.stringify in a neatly formatted table

After sending my table data to the database using ajax, I am now trying to retrieve it by clicking on the open button. $.ajax({ type: "POST", url: "http://localhost/./Service/GetPageInfo", dataType: "json", ...

javascriptjqueryjsonajax

What sets MongoDB Shell Scripting apart from JavaScript?

I'm currently working on a homework assignment and I prefer not to share my code as it would give away the solution. However, I can provide some generic snippets. I must admit, I am a novice when it comes to javascript and Mongo, and I only learned ab ...

javascriptnode.jsmongodbmongo-shell

Having trouble positioning the button on the right side of the page and aligning the text in the center of the page

Having trouble positioning the button to the right of the page and aligning the text in the center, despite adding CSS properties such as float: right. <div id="project-heading" style = "margin-top: 0px; padding-bottom: 0px;margin-bottom: 0px ; padd ...

htmlcss

Duplicate a DOM element and incorporate animation into it

After extensively researching articles and documentation on this topic, I have yet to find a solution that aligns with the approach I am attempting to implement. My scenario involves an array of category items which contain a nested array of products be ...

javascriptangulardom

Enforce the retrieval of all fields, even those that have been overridden

I have a query that utilizes mongoose and involves a select operation. The model's schema is configured to exclude two specific fields, like so: contents: { type: String select: false }, password: { type: String select: false } Howev ...

javascriptnode.jsmongoose

The CSS selector functions as expected when used in a web browser, however, it

While conducting test automation using Selenium, I typically rely on css selectors to find elements. However, I recently came across a peculiar issue. I observed that in certain cases, the css selector works perfectly when tested in the browser console. Fo ...

javascriptjquerycssseleniumcss-selectors

Tips for effectively engaging with a Component's aggregationUnleash the full potential of

After configuring an aggregation for my Component, here is what it looks like: aggregations : { busyDialog : { type: "sap.m.BusyDialog", multiple: false } } The aggregation is named ...

javascriptmodel-view-controllercomponentssapui5

What could be causing my Chrome extension to function on Mac but not on a PC?

I created a basic Chrome extension that includes a background page with the following code: <script type="text/javascript> chrome.tabs.onDetached.addListener(function(tabId, info){ var id = tabId; chrome.tabs.get(id, function(tab) { ...

javascriptwindowsmacosgoogle-chrome-extension

Is there a way to automatically close a created div by clicking anywhere outside of it?

I'm facing an issue with a dynamically created div that I want to close by clicking outside of it. However, when I try to achieve this functionality, the div closes immediately as soon as it is opened. closediv(); } function closediv() { d ...

javascripthtmlweb

arrange the elements in an array list alphabetically by name using the lodash library

Is there a way to alphabetically sort the names in an array list using JavaScript? I attempted to achieve this with the following code: const sample = [ { name: "AddMain", mesg: "test000" }, { name: "Ballside", ...

javascripttypescriptlodash

Retrieve data from an external website containing an HTML table without a table ID using Java Script and transform it into JSON

I have developed a script that can convert HTML table data into a JSON Object. To accomplish this task, I utilized the jquery plugin created by lightswitch05. With this code, I am able to extract data from an HTML table on the same web page using: var t ...

javascriptjqueryhtmljsonhtml-table

Issues with maintaining the checked state of radio buttons in an Angular 4 application with Bootstrap 4

In my Angular 4 reactive form, I am struggling with the following code: <div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary" *ngFor="let item of list;let i=index" > <input type="radio" name="som ...

htmlangulartypescriptbootstrap-4

What is the process for assigning a value to the body in a div element?

Within a div, there is a body element structured like this: <div id = "TextBox1"> <iframe id = "TextBox1_1"> #document <html> <head></head> <body></body> </html> </iframe> </div> I have attempte ...

javascriptjqueryhtmlcss

This error message 'React Native _this2.refs.myinput.focus is not a function' indicates that

When working with React-Native, I encountered a specific issue involving a custom component that extends from TextInput. The code snippet below demonstrates the relevant components: TextBox.js ... render() { return ( <TextInput {...this.props} ...

javascriptreactjsreact-nativeecmascript-6

Is there a way to modify the props.data in a child component?

I need assistance with displaying a range from an array that is passed into a child component. Currently, my Parent component looks like this: import data from './data.json' return ( <Cell symbol={data.symbol} number={data.number} /> ) ...

javascriptarraysreactjsreact-hooksuse-state

Tips for preventing H1 from taking up the entire div

I'm currently working on developing a new theme for my WordPress website. One issue I've encountered is that the h1 element is causing the top menu to appear below it instead of on the same line. Can anyone help me overcome this challenge? Here& ...

phphtmlcsswordpress-theming

Having trouble with utilizing react-select and its menuIsOpen attribute?

Currently, I'm navigating a complex component that requires the use of an options list. As react-select is already implemented throughout my application, it seems logical to utilize it in this scenario as well. My goal is to integrate react-select inl ...

javascriptreactjsreact-select