为何JS中if条件内的reset()函数无视输入条件始终执行？

你的代码存在几个关键问题，导致逻辑完全不符合预期，逐个解决就能正常运行：

1. 错误获取输入框内容 #

<input> 表单控件的用户输入内容存在 value 属性里，而非 textContent（textContent 用于获取元素内部的文本节点内容，比如 <p> 标签里的文字）。你原代码的判断条件document.getElementById("reset").textContent == "Yes"永远不成立，再加上submit按钮的默认行为，导致表单总是被提交重置。

2. 未阻止submit按钮的默认提交行为 #

点击<input type="submit">的默认行为是提交表单，会触发页面刷新或表单重置，这会直接覆盖你写的JavaScript逻辑。必须阻止这个默认行为，才能让自定义代码生效。

3. 函数名冲突 #

clear是JavaScript的内置保留字（比如用于window.clearTimeout），用它做函数名可能引发意外冲突，建议改名。

4. error元素默认未隐藏 #

你提到error元素默认是隐藏的，但当前代码没有对应的CSS样式，需要添加样式让它初始不可见。

修正后的完整代码 #

CSS（添加到页面的<style>标签中） #

#error {
  visibility: hidden;
  color: red; /* 可选：给错误提示添加红色，更醒目 */
}

JavaScript #

function handleResetRequest(event) {
  // 阻止submit按钮的默认提交行为
  event.preventDefault();
  
  const resetInput = document.getElementById("reset");
  // 去除输入内容首尾空格，同时忽略大小写匹配
  if (resetInput.value.trim().toUpperCase() === "YES") {
    document.getElementById("main").reset();
    // 重置后恢复error隐藏状态与按钮可用状态
    const err = document.getElementById("error");
    err.style.visibility = "hidden";
    document.querySelector('#submit').disabled = false;
    return;
  }
  
  // 不满足条件时显示错误并禁用按钮
  const err = document.getElementById("error");
  err.style.visibility = "visible";
  document.querySelector('#submit').disabled = true;
}

HTML（修改submit按钮的onclick事件） #

<form id="main">
  <p>
    <span id="introduction"></span>
    <br><br>
    <span id="annualGoals"></span><br>
    <span id="monthlyBudget"></span>
  </p>
  <br><br><br><br>
  <div id="finish">
    Reset (Yes/No)?<br>
    <input type="text" id="reset"><br><br>
    <!-- 传递event参数给函数，用于阻止默认行为 -->
    <input type="submit" id="submit" value="submit" onclick="handleResetRequest(event)"><br><br>
    <p id="error">We're unable to complete your request, please refresh the page to try again.</p>
  </div>
</form>

额外提示：HTML中不存在<p1>标签，建议替换为<p>或<span>，避免浏览器解析异常。

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