onclick 无法显示和阻止的问题答案

【问题标题】：trouble with onclick for making display none and blockonclick 无法显示和阻止的问题
【发布时间】：2019-08-03 14:28:41
【问题描述】：

我正在尝试在 js 中使用 onclick 代码和 style.display 来隐藏某物并进行潜水，默认情况下它的显示为 none 以获取阻止和出现。

第一个不会隐藏，另一个不会出现！

脚本文件运行良好，我在 js 中有其他东西运行良好。

function showDiv() {
    document.getElementById('chatbutton').style.display = "none";
    document.getElementById('chatbox').style.display = "block";
  }

 <a href="" id="chatbutton" >
  <div class="mychat text-center" onclick="showDiv()">
      <p class="chattext">Chat Support</p>
  </div>
</a>

<div id="chatbox" class="mychat_open text-center d-none">
  <p class="chattext">Chat Support</p>
  <div class="form-group">
      <input type="text" class="form-control" id="usr" placeholder="Enter your Name...">
      <input type="text" class="form-control" id="usr" placeholder="Enter your Email...">
  </div>
</div>

.mychat_open{
   width: 15vw;
   height: 20vh;
   background-color: black;
   position: fixed;
   bottom: 20px;
   right: 20px;
   color: white;
   opacity: 0.8;
   min-height: 28px; 
}

【问题讨论】：

您已将文本包装在 <a href=""> 中，这意味着单击将运行代码，然后导致页面重新加载。不要使用内联代码。改用这个：document.getElementById('chatbutton').onclick = function (e) { e.preventDefault(); /* rest of code */ };（并确保该脚本位于主要 HTML 内容下方）
另外，带有空href的<a href="">在不同的浏览器中做不同的事情。不要在生产中使用它。
哦，谢谢，从中删除了 href，现在在点击时被隐藏，但其他
不会出现

标签： javascript html

【解决方案1】：

您的 JS 工作正常，但您在 empy <a href=""> 标记中有 onclick 函数。您可以像 <a href="#"> 那样向其添加 # 或将其更改为其他类型的元素，例如 <button>，以防止页面在单击时重新加载。

您应该为要显示的元素切换“d-none”类。

document.getElementById('chatbox').classList.remove('d-none')

【讨论】：

从中删除了 href，现在在点击时被隐藏，但其他
不会出现
需要查看这些类的 CSS mychat_open, text-center d-none
编辑帖子并添加 mychat_open、d-none 和 text-center 是 bootstrap 4 默认代码。

【解决方案2】：

如果目标是让聊天框最初隐藏，那么您可以将其显示样式属性设置为display:none。

<div id="chatbox" class="mychat_open text-center d-none" style="display:none">
    <p class="chattext">Chat Support</p>
    <div class="form-group">
        <input type="text" class="form-control" id="usr" placeholder="Enter your Name...">
        <input type="text" class="form-control" id="usr" placeholder="Enter your Email...">
    </div>
</div>

这将隐藏聊天框，直到用户单击按钮。这是因为 js 将 id 为“chatbox”的元素的style.display 属性更改为block。

【讨论】：

【解决方案3】：

我在链接中添加了 return false 以防止页面重新加载

添加了一个样式规则来实际隐藏盒子，所以我们可以显示它:)

（添加 p 以直观地显示它是另一个显示的框，而不是一些打嗝。）

function showDiv() {
  document.getElementById('chatbutton').style.display = "none";
  document.getElementById('chatbox').style.display = "block";
}

<html>
<body>
  <a href="" id="chatbutton">
      <div class="mychat text-center" onclick="showDiv(); return false;">
          <p class="chattext">Chat Support</p>
      </div>
  </a>

  <div id="chatbox" class="mychat_open text-center d-none" style="display: none;">
      <p class="chattext">Chat Support Box</p>
      <div class="form-group">
          <input type="text" class="form-control" id="usr" placeholder="Enter your Name...">
          <input type="text" class="form-control" id="usr" placeholder="Enter your Email...">
      </div>
  </div>
</body>
</html>

【讨论】：

【解决方案4】：

亲爱的，这可能会对你的情况有所帮助

取消字符串并添加按钮

<button onclick="myFunction()">Chat Support</button>

在您的 div 中添加 ID 聊天框样式不显示，

 <div id="chatbox" class="mychat_open text-center d-none" style=" display: none">

然后添加java

function myFunction() {
  var x = document.getElementById("chatbox");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";

} }

你的完整格式是这样的

    <button onclick="myFunction()">Chat Support</button>
<div id="chatbox" class="mychat_open text-center d-none" style=" display: none">
<p class="chattext">Chat Support</p>
<div class="form-group">
        <input type="text" class="form-control" id="usr" placeholder="Enter your Name...">
        <input type="text" class="form-control" id="usr" placeholder="Enter your Email...">
</div>

<script>
function myFunction() {
  var x = document.getElementById("chatbox");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
 }

}

【讨论】：