How to make div appear on button click using Javascript

Question

I'm trying to make a div appear on button click which I've not succeeded from the below code.Please let me know if I've done any thing wrong in the code.

function showDiv() {
  document.getElementById('sign-in').style.display = "block";
}

<a class="btn btn-default log-bar" href="#" role="button" onclick="showDiv()">Login</a>


<div id="sign-in" class="login" style="display: none;">
  <form>
    <div class="row">
      <div class="col-md-3">
        <div class="form-group inline-form">
          <input type="email" class="form-control" id="email" Placeholder="email">
        </div>
      </div>
      <div class="col-md-3">
        <div class="form-group inline-form">
          <input type="password" class="form-control" id="pwd">
        </div>
      </div>
      <div class="col-md-3">
        <div class="checkbox">
          <label><input type="checkbox"> Remember me</label>
        </div>
      </div>
      <div class="col-md-3">
        <button type="submit" class="btn btn-default ">Submit</button>
      </div>
    </div>
  </form>
</div>

have you used script tag for JavaScript Function? Just Confirming — Zahid Mustafa, Jun 06 '17 at 05:46
spelling mistake. It should be document.getElementById("sign-in"); — vartika, Jun 06 '17 at 05:46
https://stackoverflow.com/questions/6957443/how-to-display-div-after-click-the-button-in-javascript — Zahid Mustafa, Jun 06 '17 at 05:47
I hope you have simplified the code, but the function should be between script tags, futhermore, is getElementById, instead getElementByid. You should also instead using use an — Diego N., Jun 06 '17 at 05:50
@ZahidMustafa yea actually the JS code is in another file , I've given the src link in the html. — srikar reddy, Jun 06 '17 at 05:54
Thankyou @Diego I've changed the tag to and now its working perfectly. — srikar reddy, Jun 06 '17 at 06:02

score 0 · Answer 1 · answered Jun 06 '17 at 05:48

change getElementByid to getElementById (i to I)

function showDiv() {
  document.getElementById('sign-in').style.display = "block";
}

<a class="btn btn-default log-bar" href="#" role="button" onclick="showDiv()">Login</a>


<div id="sign-in" class="login" style="display: none;">
  <form>
    <div class="row">
      <div class="col-md-3">
        <div class="form-group inline-form">
          <input type="email" class="form-control" id="email" Placeholder="email">
        </div>
      </div>
      <div class="col-md-3">
        <div class="form-group inline-form">
          <input type="password" class="form-control" id="pwd">
        </div>
      </div>
      <div class="col-md-3">
        <div class="checkbox">
          <label><input type="checkbox"> Remember me</label>
        </div>
      </div>
      <div class="col-md-3">
        <button type="submit" class="btn btn-default ">Submit</button>
      </div>
    </div>
  </form>
</div>

score 0 · Answer 2 · edited Jun 06 '17 at 06:02

You have typed wrong document.getElementByid it should be capital I document.getElementById

function showDiv() {
  document.getElementById('sign-in').style.display = "block";
}

<a class="btn btn-default log-bar" href="#" role="button" onclick="showDiv()">Login</a>


<div id="sign-in" class="login" style="display: none;">
  <form>
    <div class="row">
      <div class="col-md-3">
        <div class="form-group inline-form">
          <input type="email" class="form-control" id="email" Placeholder="email">
        </div>
      </div>
      <div class="col-md-3">
        <div class="form-group inline-form">
          <input type="password" class="form-control" id="pwd">
        </div>
      </div>
      <div class="col-md-3">
        <div class="checkbox">
          <label><input type="checkbox"> Remember me</label>
        </div>
      </div>
      <div class="col-md-3">
        <button type="submit" class="btn btn-default ">Submit</button>
      </div>
    </div>
  </form>
</div>

score 0 · Answer 3 · answered Jun 06 '17 at 05:48

0

Its Simple

<script>
function showDiv() {
   document.getElementById('sign-in').style.display = "block";
}
</script>

answered Jun 06 '17 at 05:48

Zahid Mustafa

195
8

score 0 · Answer 4 · answered Jun 06 '17 at 05:52

0

getElementById() is a function and its case sensitive . You need to write getElementByid() as getElementById().

Note:- i in getElementById() should be capital .

answered Jun 06 '17 at 05:52

Deepak Dixit

1,510
15
24

score -1 · Answer 5 · answered Jun 06 '17 at 06:01

Can I strongly, strongly suggest that you use jQuery to do this - it makes this task trivial on all browsers. To do this with jQuery, perform the following steps.

Include the jQuery script library in your web page <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>.

Add an id property to your button <a class="btn btn-default log-bar" href="#" id="loginButton" role="button" onclick = "showDiv()" >Login</a>.

Add the following Javascript to your page:

<script>
    $(function() {
        $("#loginButton").click(function() {
            $("#sign-in").show();
        });
    });
</script>

How to make div appear on button click using Javascript

5 Answers5