Wie div erscheint auf Knopfdruck mit Javascript

Question

Ich versuche, ein div erscheinen auf Knopf klicken, die ich nicht aus dem untenstehenden Code gelungen bin.Bitte lassen Sie mich wissen, wenn ich etwas falsch gemacht habe in der 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>

Answer 1

Änderung getElementByid zu getElementById (i zu 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>

Answer 2

Sie haben falsch getippt document.getElementByid es Kopf sein sollte, Einfache l Idocument.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>

Answer 3

Seine

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

Answer 4

getElementById() ist eine Funktion und ihre Groß- und Kleinschreibung. Sie müssen getElementByid() als getElementById() schreiben.

Hinweis: - i in getElementById() sollte Kapital sein.

Answer 5

Kann ich stark, stark empfehlen, dass Sie jQuery verwenden, um dies zu tun - macht es diese Aufgabe in allen Browsern trivial. Führen Sie dazu mit jQuery die folgenden Schritte aus.

Fügen Sie die jQuery-Skriptbibliothek in Ihre Webseite ein <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>.

Fügen Sie Ihrer Schaltfläche eine ID-Eigenschaft hinzu <a class="btn btn-default log-bar" href="#" id="loginButton" role="button" onclick = "showDiv()" >Login</a>.

Fügen Sie den folgenden Javascript zu Ihrer Seite:

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