首次点击时弹窗不显示

嘿，我来帮你排查这个问题～

你遇到的问题根源其实很简单：弹窗初始的 display: none 是写在外部CSS里的，而 element.style.display 这个属性只能读取元素的内联样式（也就是直接写在标签上的style属性），所以第一次点击的时候，chatModal.style.display 的值其实是空字符串 ""，但你的判断条件里写的是匹配 "none" 或者 " "（空格），这就没匹配上，导致第一次点击没有触发显示逻辑。

等第二次点击的时候，你已经通过JS给元素加上了内联的 display: block，这时候 style.display 能读到值，判断逻辑就正常工作了，所以第二次点击能隐藏，第三次又能显示，以此类推。

给你几个解决方案，挑适合你的用：

方案1：修正判断条件 #

把判断里的空格改成空字符串，让初始状态能被正确识别：

document.querySelector(".chatButtons").addEventListener("click", myFunction);

function myFunction() {
  var chatModal = document.getElementById("myForm");

  if (chatModal.style.display === "none" || chatModal.style.display === "") {
    chatModal.style.display = "block";
  } else {
    chatModal.style.display = "none";
  }
}

方案2：读取计算后的样式（更准确） #

用 window.getComputedStyle 获取元素实际生效的样式，不管样式是写在CSS里还是内联的，都能准确判断：

document.querySelector(".chatButtons").addEventListener("click", myFunction);

function myFunction() {
  var chatModal = document.getElementById("myForm");
  const actualDisplay = window.getComputedStyle(chatModal).display;
  
  if (actualDisplay === "none") {
    chatModal.style.display = "block";
  } else {
    chatModal.style.display = "none";
  }
}

方案3：用CSS类控制（推荐） #

这种方法更符合样式与逻辑分离的原则，代码也更简洁易维护：
先修改CSS，新增一个控制显示的类：

#myForm { 
  display: none; 
}
#myForm.show {
  display: block;
}

然后JS只需要切换这个类就行：

document.querySelector(".chatButtons").addEventListener("click", myFunction);

function myFunction() {
  var chatModal = document.getElementById("myForm");
  chatModal.classList.toggle("show");
}

这样处理后，第一次点击就能正常触发弹窗显示啦～

备注：内容来源于stack exchange，提问作者paul kendal23