Javascript Why element.classList.add（'；类名'；）；它不起作用了吗？

有HTML（部分）：

---

但并没有添加类。我的错误在哪里？

首先，您需要将提交按钮放入表单中。
然后，将提交按钮更改为输入：

<input class="btn btn-red" type="submit">Submit</input>

属性

required

不允许提交空表单，因此您的提交回调永远不会运行。
如果删除

required

属性，您的代码将正常工作。

如果将

submit

放在

中，它应该正常工作

见工作

提交

编辑：更多说明：

用于创建控件的元素通常出现在表单元素内部，但在用于构建用户界面时，也可能出现在表单元素声明外部。这将在内部事件一节中讨论。请注意，窗体外部的控件不能是成功的控件

---

你确定你能挺过去吗？将console.log添加到verify@LinaCSS属性选择器中需要引号。例如：

modalWriteUs.querySelector（'[name=“user name”]'）

@Nayuki属性选择器的值也可以是标识符。使用Chrome调试器来发现问题，这正是它的目的。主要问题是提交按钮元素不在

表单

元素内。这意味着单击按钮时不会提交表单。您还需要确保在加载DOM后运行JS。此外，您可能还需要将

novalidate

属性添加到

form

元素，以防止默认验证->您可能需要解释原因。谢谢！我现在把属性“required”放在了里面，并从代码工作中删除了它。如果有建设性的批评，我将不胜感激，因为我们有一些“否定性”：

var modalWriteUs = document.querySelector('.modal-write-us');
var form = modalWriteUs.querySelector('form');
var userName = modalWriteUs.querySelector('[name=user-name]');
var eMail = modalWriteUs.querySelector('[name=e-mail]');
var textArea = modalWriteUs.querySelector('[name=text]');

form.addEventListener('submit', function(event) {
  if (!userName.value || !eMail.value || !textArea.value) {
    event.preventDefault();
    modalWriteUs.classList.add('modal-error');
  }
});

<input class="btn btn-red" type="submit">Submit</input>

querySelector('[name="user-name"]')

<div class="modal-write-us">
  <form class="modal-write-us-form" action="" method="post">
    <label>
      <input type="text" name="user-name" required>
    </label>
    <label>
      <input type="text" name="e-mail" required>
    </label>
    <label for="text-field"></label>
    <textarea name="text" rows="5" id="text-field" required></textarea>
    <div class="modal-write-us-button">
      <button class="btn btn-red" type="submit">Submit</button>
    </div>
  </form>
</div>