Java Script Show Div Question when button clicked the form still stays hidden

wateriswet247365 · March 26, 2021, 3:53pm

<html lang="en"><head>
  <meta charset="UTF-8">
  <title>CorruptedCode-login</title>
  <link href="https://fonts.googleapis.com/css?family=Titillium+Web:400,300,600" rel="stylesheet" type="text/css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.csss">
</head>
<body>
    <p>
        <button type="button" class="choice-button" onclick="showDiv">Login</button>
    </p>
<!-- partial:index.partial.html -->
    
<div class="form" id="sign-in" style="display: none">

      <ul class="tab-group">
        <li class="tab active"><a href="#signup">Sign Up</a></li>
        <li class="tab"><a href="#login">Log In</a></li>
      </ul>

      <div class="tab-content">
        <div id="signup";>
          <h1>Sign Up For Free</h1>

          <form action="/" method="post">

          <div class="top-row">
            <div class="field-wrap">
              <label>
                First Name<span class="req">*</span>
              </label>
              <input type="text" required="" autocomplete="off">
            </div>

            <div class="field-wrap">
              <label>
                Last Name<span class="req">*</span>
              </label>
              <input type="text" required="" autocomplete="off">
            </div>
          </div>
          <div class="field-wrap">
            <label>
              Username<span class="req">*</span>
            </label>
            <input type="text" required="" autocomplete="off">
          </div>
          <div class="field-wrap">
            <label>
              Email Address<span class="req">*</span>
            </label>
            <input type="email" required="" autocomplete="off">
          </div>

          <div class="field-wrap">
            <label>
              Set A Password<span class="req">*</span>
            </label>
            <input type="password" required="" autocomplete="off">
          </div>

          <button type="submit" class="button button-block">Get Started</button>

          </form>

        </div>

        <div id="login" style="display: none;" class="login-scr">
          <h1><bold>Welcome Back!</bold></h1>

          <form action="/" method="post">

            <div class="field-wrap">
            <label>
              Email Address<span class="req">*</span>
            </label>
            <input type="email" required="" autocomplete="off">
          </div>

          <div class="field-wrap">
            <label>
              Username<span class="req">*</span>
            </label>
            <input type="text" required="" autocomplete="off">
          </div>
          <div class="field-wrap">
            <label>
              Password<span class="req">*</span>
            </label>
            <input type="password" required="" autocomplete="off">
          </div>

          <p class="forgot"><a href="#"><b>Forgot Password?</b></a></p>

          <button class="button button-block">Log In</button>

          </form>

        </div>

      </div><!-- tab-content -->

</div> <!-- /form -->
<!-- partial -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><script src="./script.js">
    function showDiv() {
        document.getElementByIdd('sign-in').style.display = "block";
}
    
    </script>



</body></html>

kevinSmith · March 26, 2021, 4:03pm

Do you have a question? Statement of the issue?

wateriswet247365 · March 26, 2021, 4:03pm

yes when I clicxk the button it still stays hideen

wateriswet247365 · March 26, 2021, 4:08pm

the button is at the top and the js is at the bottom

kevinSmith · March 26, 2021, 4:19pm

OK, I see a couple of issues.

First of all, the invocation should be a function call:

<button type="button" class="choice-button" onclick="showDiv();">Login</button>

Your code isn’t well formatted so it’s a big confusing here:

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><script src="./script.js">
    function showDiv() {
        document.getElementByIdd('sign-in').style.display = "block";
}

    </script>

Learn to format code as you go. When I format this:

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="./script.js">
    function showDiv() {
      document.getElementByIdd('sign-in').style.display = "block";
    }
  </script>

I see that you are trying to define that function in the middle of a different script import. Make it its own:

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="./script.js"></script>
  <script>
    function showDiv() {
      document.getElementByIdd('sign-in').style.display = "block";
    }
  </script>

Lastly, “getElementByIdd” is misspelled.

When I fix those three things, your code works.

wateriswet247365 · March 26, 2021, 4:24pm

I still tried with those fixes (thanks btw) but when I ran it in my browser it still did work

kevinSmith · March 26, 2021, 4:27pm

Can we see what you have now?

wateriswet247365 · March 26, 2021, 4:29pm

type or paste code here<html lang="en"><head>
  <meta charset="UTF-8">
  <title>CorruptedCode-login</title>
  <link href="https://fonts.googleapis.com/css?family=Titillium+Web:400,300,600" rel="stylesheet" type="text/css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.csss">
</head>
<body>
    <p>
        <button type="button" class="choice-button" onclick="showDiv">Login</button>
    </p>
<!-- partial:index.partial.html -->
    
<div class="form" id="sign-in" style="display: none">

      <ul class="tab-group">
        <li class="tab active"><a href="#signup">Sign Up</a></li>
        <li class="tab"><a href="#login">Log In</a></li>
      </ul>

      <div class="tab-content">
        <div id="signup";>
          <h1>Sign Up For Free</h1>

          <form action="/" method="post">

          <div class="top-row">
            <div class="field-wrap">
              <label>
                First Name<span class="req">*</span>
              </label>
              <input type="text" required="" autocomplete="off">
            </div>

            <div class="field-wrap">
              <label>
                Last Name<span class="req">*</span>
              </label>
              <input type="text" required="" autocomplete="off">
            </div>
          </div>
          <div class="field-wrap">
            <label>
              Username<span class="req">*</span>
            </label>
            <input type="text" required="" autocomplete="off">
          </div>
          <div class="field-wrap">
            <label>
              Email Address<span class="req">*</span>
            </label>
            <input type="email" required="" autocomplete="off">
          </div>

          <div class="field-wrap">
            <label>
              Set A Password<span class="req">*</span>
            </label>
            <input type="password" required="" autocomplete="off">
          </div>

          <button type="submit" class="button button-block">Get Started</button>

          </form>

        </div>

        <div id="login" style="display: none;" class="login-scr">
          <h1><bold>Welcome Back!</bold></h1>

          <form action="/" method="post">

            <div class="field-wrap">
            <label>
              Email Address<span class="req">*</span>
            </label>
            <input type="email" required="" autocomplete="off">
          </div>

          <div class="field-wrap">
            <label>
              Username<span class="req">*</span>
            </label>
            <input type="text" required="" autocomplete="off">
          </div>
          <div class="field-wrap">
            <label>
              Password<span class="req">*</span>
            </label>
            <input type="password" required="" autocomplete="off">
          </div>

          <p class="forgot"><a href="#"><b>Forgot Password?</b></a></p>

          <button class="button button-block">Log In</button>

          </form>

        </div>

      </div><!-- tab-content -->

</div> <!-- /form -->
<!-- partial -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="./script.js"></script>
  <script>
    function showDiv() {
      document.getElementById('sign-in').style.display = "block";
    }
  </script>



</body></html>

kevinSmith · March 26, 2021, 4:31pm

You forgot the first step:

        <button type="button" class="choice-button" onclick="showDiv();">Login</button>

When I fix that, the code works for me.

wateriswet247365 · March 26, 2021, 4:32pm

Oh thank you so much!!

wateriswet247365 · March 26, 2021, 4:33pm

Now I can see that im getting to be a little annyoing, but can you tell me how to make it sso its a smooth transition?

kevinSmith · March 26, 2021, 4:38pm

It’s not annoying, that’s why the forum is here.

At that point your going to have to do some CSS transformations. You have to decide what you mean by “smooth”. Do you mean that it will smoothly expand? From the bottom? Top? Side? Or do you mean that it will fade in?

These will all be handled by CSS transform. Here is some discussion on the subject. Mess around with that and see what you can do.

system · September 25, 2021, 4:38am

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Need help with CodePen JavaScript	5	298	October 7, 2024
[Django] Hide button in javascript JavaScript	7	1738	June 1, 2021
Show/hide element div element in javascript JavaScript	3	2367	September 14, 2022
How to show/hide different forms based on a button selected JavaScript	2	4857	January 25, 2021
Created a Signup & Login form, but need help showing the correct form depending on the url...! Need some javascript help please JavaScript	19	5723	February 2, 2021

Java Script Show Div Question when button clicked the form still stays hidden

Related topics