Javascript 以模式显示来自表单提交（Mailchimp）的响应

这是我的第一个问题，希望有人能帮忙

我已经在我的网站上嵌入了一个定制的Mailchimp表单，我正在尝试以一种模式显示响应。实际上，我已经成功地将其设置为模式，但我无法显示关闭按钮，也无法设置模式覆盖

我在许多地方寻找了解决方案，包括：

为此，我在我的页面上添加了jQuery，版本为jQuery-3.2.0.min.js，但我很乐意使用vanilla js

以下是表单HTML的相关部分：

<div id="mce-responses" class="clear">
  <div class="modal-overlay closed" id="modal-overlay">
  </div>
  <div class="response modal closed" id="mce-error-response">
    <button class="close-button" id="close-button">Close Button</button>
  </div>
  <div class="response modal closed" id="mce-success-response">
    <button class="close-button" id="close-button">Close Button</button>
  </div>
</div>    

<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true">
  <input type="text" name="b_2e0789618f3335c1fdeae5f80_f5d18d0c88" tabindex="-1" value="">
</div>

<div class="button-heart form-submit">
  <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe">
  <svg class="icon icon-heart" aria-hidden="true">
    <use xlink:href="/images/icons.svg#heart"></use>
  </svg>
</div>

Chrome inspector中还有一个控制台错误：

Uncaught TypeError: Cannot read property 'classList' of null
    at HTMLButtonElement.<anonymous> ((index):114)

Uncaught TypeError:无法读取null的属性“classList”
在HTMLButtoneElement

我发现StackOverflow是非常宝贵的，因为多年来我一直在自学web开发，我很高兴发布我的第一个问题。谢谢你能提供的任何帮助
 这样做的原因是，虽然您的模态具有类
模态
，但它没有id
模态
，因此尝试使用
#模态
选择器选择它时，文档中将找不到任何内容，并返回
null
。由于无法对
null
值访问属性，因此会引发异常。将选择器切换到
.modal
，或向模态元素添加
id=“modal”
属性

因此，使用以下HTML：

<div id="mce-responses" class="clear">
  <div class="modal-overlay closed" id="modal-overlay">
  </div>
  <div class="response modal closed" id="mce-error-response">
    <button class="close-button" id="close-button">Close Button</button>
  </div>
  <div class="response modal closed" id="modal">
    <button class="close-button" id="close-button">Close Button</button>
  </div>
</div>

当我单击订阅按钮时，我看到模式弹出窗口中只有一个非功能关闭按钮。这不是你要回答的问题吗？
我将尝试回答这个问题，但我只想说这是一个非常非常高质量的第一个问题。谢谢，我非常感谢！谢谢你的@furkle-不知道我怎么会错过它！更改了该选项，但现在提交时不会显示任何内容。以前，我在页面部分或（如屏幕截图所示）该模式中显示了成功/错误文本。现在什么都没有了。仍在获取控制台错误：“Uncaught TypeError:无法读取HtmlButtoneElement处null的属性“classList”。（（索引）：112）“@MikePeiman我已经更新了答案——请随意在评论中回复。我还注意到，当我重复提交时（每个事件侦听器的右括号），控制台错误在索引：112和索引：106之间交替出现，这表明确实有一些类切换正在进行（或者至少我猜有）查看您的更新答案，代码看起来几乎和我的相同，不，当我单击订阅按钮时，我没有看到任何响应。我能看到的一个代码差异是在HTML中，我的第三个内部div有Mailchimp success id:id=“mce success response model”。也许Mailchimp脚本中有什么干扰？顺便说一句，如果我输入了一个不可行的电子邮件地址，我输入的值在单击提交按钮后仍保留在输入字段中；当我输入一个可行的电子邮件地址时，字段会清除，似乎表明表单验证仍在后台运行。这就是问题所在。两点：第一，一个元素只能有一个id，因此在id属性中不需要同时有
mce成功响应
和
modal
；第二：您不是在代码中寻找
mce成功响应
选择器，而是在寻找
modal
。因此，要么更新javascript中的选择器以读取
mce成功响应
，要么将元素的id更改为读取
modal
。
Uncaught TypeError: Cannot read property 'classList' of null
    at HTMLButtonElement.<anonymous> ((index):114)

<div id="mce-responses" class="clear">
  <div class="modal-overlay closed" id="modal-overlay">
  </div>
  <div class="response modal closed" id="mce-error-response">
    <button class="close-button" id="close-button">Close Button</button>
  </div>
  <div class="response modal closed" id="modal">
    <button class="close-button" id="close-button">Close Button</button>
  </div>
</div>

var modal = document.querySelector("#modal");
var modalOverlay = document.querySelector("#modal-overlay");
var closeButton = document.querySelector("#close-button");
var openButton = document.querySelector("#mc-embedded-subscribe");

openButton.addEventListener("click", function() {
  modal.classList.toggle("closed");
  modalOverlay.classList.toggle("closed");
  closeButton.classList.toggle("closed");
});

closeButton.addEventListener("click", function() {
  modal.classList.toggle("closed");
  modalOverlay.classList.toggle("closed");
})