javascript - onclick 使不显示和阻止的麻烦

Question

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

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

脚本文件工作正常，我在 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; 
}

Answer 1

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

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

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