如何讓div出現在使用Javascript的按鈕點擊上

-3

我想讓div出現在按鈕上，點擊我沒有從下面的代碼中獲得成功。請讓我知道如果我做了任何錯誤的事情碼。如何讓div出現在使用Javascript的按鈕點擊上

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>

來源

2017-06-06 srikar reddy

有你使用script標籤的JavaScript函數？只是確認 –

拼寫錯誤。它應該是document.getElementById（「登錄」）; – vartika

https://stackoverflow.com/questions/6957443/how-to-display-div-after-click-the-button-in-javascript –

變化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>

來源

2017-06-06 05:48:06 Swellar

你輸入錯誤document.getElementByid應該是人均升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>

來源

2017-06-06 05:48:46

其簡單

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

來源

2017-06-06 05:48:58

getElementById()是一個函數，它區分大小寫。您需要編寫getElementByid()作爲getElementById()。

注： -我在getElementById()應該是資本。

來源

2017-06-06 05:52:16

-1

我可以強烈建議您使用jQuery來做到這一點 - 它使得這項任務在所有瀏覽器上變得微不足道。要用jQuery來做到這一點，請執行以下步驟。

將jQuery腳本庫包含在您的網頁<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>中。

將一個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>

來源

2017-06-06 06:01:59

如何讓div出現在使用Javascript的按鈕點擊上

回答

相關問題