Javascriptを使ってボタンをクリックするとdivを表示する方法

Question

私は以下のコードから成功しなかったボタンをクリックするとdivを表示させようとしています。コード。

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

getElementByIdに変更getElementByid（Iから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

あなたは間違っdocument.getElementByidを入力したことは、一人でなければなりません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

シンプルな

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

Answer 4

getElementById()関数とその大文字と小文字が区別されます。 getElementByid()をgetElementById()と書く必要があります。

注： - iがgetElementById()で資本でなければなりません。

Answer 5

jQueryを使用することを強くお勧めしますか？この作業はすべてのブラウザで簡単です。 jQueryでこれを行うには、以下の手順を実行します。

ウェブページ<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>にjQueryスクリプトライブラリを含めます。

ボタンにidプロパティを追加します。<a class="btn btn-default log-bar" href="#" id="loginButton" role="button" onclick = "showDiv()" >Login</a>

は、あなたのページに次のJavaScriptを追加します。

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