如何使用 Javascript 使 div 出现在按钮单击时答案

【问题标题】：How to make div appear on button click using Javascript如何使用 Javascript 使 div 出现在按钮单击时
【发布时间】：2018-11-07 17:47:30
【问题描述】：

我正在尝试在按钮单击时显示一个 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>

【问题讨论】：

你在 JavaScript 函数中使用过脚本标签吗？只是确认
拼写错误。应该是 document.getElementById("sign-in");
stackoverflow.com/questions/6957443/…
我希望你已经简化了代码，但是函数应该在脚本标签之间，而且是getElementById，而不是getElementByid。您还应该使用使用
谢谢你没有注意到“我”，但仍然没有工作。

标签： javascript html css

【解决方案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>

【讨论】：

【解决方案2】：

很简单

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

【讨论】：

【解决方案3】：

getElementById() 是一个函数，它区分大小写。你需要把getElementByid()写成getElementById()。

注意：- getElementById() 中的 i 应为大写。

【讨论】：

【解决方案4】：

你打错了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>

【讨论】：

【解决方案5】：

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

【讨论】：