JS点击按钮批量修改同class提示文本不生效问题

代码点击提交无响应、错误提示不生效是三个问题叠加导致，无需为每个提示文本设置独立class即可修复：

• 提交按钮为原生*submit类型*，点击后默认触发表单提交、刷新页面，未拦截该默认行为时，JS逻辑未执行完页面就被重载，表现为点击无任何响应。
• document.querySelectorAll('.wrongInfo')返回的是包含所有错误提示元素的节点集合（类数组结构），并非单个DOM元素，直接对集合设置textContent属性不会对内部元素产生任何效果。
• HTML结构存在书写错误：<body>起始标签被放置在<head>标签内部，浏览器解析DOM时会出现结构异常，可能导致元素选择器查询结果不符合预期；另外邮箱输入框存在两个重复的id属性，不符合HTML规范。

无需给每个提示元素加独立标识，遍历输入框时直接定位当前输入框同级的错误提示元素修改内容即可，同时补上默认提交行为拦截，修正HTML结构错误：

• 修正HTML结构，将<body>标签移到</head>闭合标签之后，删除邮箱输入框上重复的id属性。
• 改为监听表单的submit事件（比单独监听按钮点击更合理，可覆盖回车触发表单提交的场景），事件回调中第一时间调用preventDefault()拦截默认刷新行为。
• 遍历输入框做校验时，通过父元素查找当前输入框对应的.wrongInfo提示节点，单独修改对应节点的文本即可，同时补上输入合法时清空提示的逻辑，避免错误提示常驻。

JS逻辑 #

const formData = document.querySelector('.formData');
const formInput = document.querySelectorAll('.formInput')
const firstPassword = document.querySelector('#firstPassword')
const passwordConfirm = document.querySelector('#passwordConfirm')

formData.addEventListener('submit', (e) => {
  // 拦截表单默认提交刷新行为
  e.preventDefault();
  formInput.forEach(el => {
    // 定位当前输入框对应的错误提示元素
    const tipEl = el.parentElement.querySelector('.wrongInfo');
    if(el.value.trim() === '') {
      tipEl.textContent = 'required field'
    } else {
      // 输入内容合法时清空错误提示
      tipEl.textContent = ''
    }
  });

  // 后续密码一致性校验、数据提交逻辑可在此处扩展
});

HTML需调整的部分 #

仅需修正结构错误和重复id，其余原有内容可保留：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ol jeaa</title>
  <link rel="stylesheet" href="./styles/style.css">
</head>
<body>
  <!-- 原有页面内容不变，仅修正邮箱输入框的重复id问题 -->
  <div class="emailCont">
    <label for="email" class="labelForm" >Email</label>
    <input type="email" id="email" name="email" class="formInput" required>
    <span class="wrongInfo">iiii</span>
  </div>
  <!-- 其余原有页面结构保持不变 -->
  <script src="./scripts/script.js"></script>
</body>
</html>

内容的提问来源于stack exchange，提问作者madlib