在相同的条件下发射事件监听器和CSS类。

Question

在下面的JS代码块中，我想根据表单中输入字段的有效性来隐藏一个按钮。当.confirm按钮被点击并且表单有效时，我想在后一个按钮上启动一个事件监听器来添加一个复选标记。

然而，只有前两行代码被触发，但事件监听器却没有。有什么建议可以让我在添加remove按钮的同时，在同样的条件下，在主体上出现复选标记？

if (form.checkValidity()) {
 document.querySelector(".formSubmit").classList.add("formSubmitShow");       
 document.querySelector(".confirm").classList.add("confirmHide");
 document.querySelector(".confirm").addEventListener("click", (e)=>{
         body.classList.add("checkmark");
        });
      } else {
        formElements.forEach((el) => {
          if (!el.checkValidity()) {
            el.classList.add("invalid");
          }
        });
      }

.checkmark {
  content: url(static/gifs/check.gif);
}

Answer 1

你说

当点击.confirm按钮，表格有效时

所以，也许你只需要重组你的代码。

事件监听器的概念不是在代码中执行时触发，而是在用户制造事件时触发(这在写代码的时候是不知道的&这就是为什么它被制作成一个事件监听器的原因。listener)

document.querySelector(".confirm").addEventListener("click", (e) => {

  if (form.checkValidity()) {
    document.querySelector(".formSubmit").classList.add("formSubmitShow");
    document.querySelector(".confirm").classList.add("confirmHide");

    body.classList.add("checkmark");


  } else {
    formElements.forEach((el) => {
      if (!el.checkValidity()) {
        el.classList.add("invalid");
      }
    });
  }

});

希望重组能帮到你:D

Answer 2

我相信该事件确实会发生，问题是你误用了该事件的 内容 css属性.查看下面的链接 W3Schools. content css属性是为了与::before和::after伪元素一起使用。有一个例子显示了它应该如何使用。https:/jsfiddle.netvno85egh.

.checkmark::after {
   content: url(path/to/asset);
}

虽然在你的情况下，我觉得你可以简单的设置正文内部html。

document.body.innerHtml = "<img src=...>"

希望这对你有所帮助:)。