如何让div出现在使用Javascript的按钮点击上

问题描述：

我想让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>

有你使用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>

答

你输入错误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>

答

其简单

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

答

getElementById()是一个函数，它区分大小写。您需要编写getElementByid()作为getElementById()。

注： -我在getElementById()应该是资本。

答

我可以强烈建议您使用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>

如何让div出现在使用Javascript的按钮点击上

相关推荐