表单提交后元素无法正常使用的问题求助

我开发了一个回文检查器，但是在表单提交并执行重置操作后，表单元素出现了异常，似乎处于禁用状态，无法正常输入或点击按钮了。

HTML 代码 #

<link href="https://fonts.googleapis.com/css2?family=Rock+Salt&display=swap" rel="stylesheet">

<div class="wrapper">
  <div class="checker-container">
    <h1>Palindrome Checker</h1>
    <p>Palindrome</p>
    <p>Checker</p>
    <form name="palindrome" id="palindrome">
      <div class="input-container">
        <input id="text-input" type="text">
        <button id="check-btn" type="submit">Check</button>
      </div>
    </form>
    <div class="results-container">
      <span id="result"></span>
    </div>
  </div>
</div>

CSS 代码 #

html {
  background: linear-gradient(#12587a, #092c3d);
  overflow: hidden;
}

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  flex-direction: column;
  gap: 5rem;
}

.checker-container {
  display: flex;
  flex-direction: column;
  background-color: #4c8ab0;
  width: 35rem;
  height: auto;
  border-radius: 24px;
  justify-content: center;
  align-items: center;
  border: 1px solid white;
  gap: 10px;
  text-align: center;
  padding: 10px;
}

h1 {
  font-family: Rock Salt, serif;
  -webkit-text-stroke: 0.1px white;
  font-size: 36px;
  color: #4c8ab0;
  margin: 0;
}

p {
  font-family: Rock Salt, serif;
  -webkit-text-stroke: 1.2px white;
  font-size: 36px;
  color: #4c8ab0;
  margin: 0;
  display: none;
}

.input-container {
  background-color: #1a526e;
  width: 25rem;
  height: 8rem;
  border-radius: 24px;
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  border: 1px solid white;
}

.input-container input {
  width: 15rem;
  height: 1.5rem;
  background-color: #59a1cf;
  border-style: none;
  border-radius: 10px;
  color: white;
  font-size: 14px;
}

.input-container button {
  color: white;
  background-color: #0e425c;
  border-style: none;
  border: 1px solid white;
  font-size: 16px;
  border-radius: 10px;
  width: 4.5rem;
  height: 2rem;
}

button:hover {
  background-color: #092838;
}

span {
  color: white;
  font-family: monospace, serif;
  font-size: 16px;
  padding-top: 25rem;
}

@media screen and (max-width: 38rem) {
  .checker-container {
    width: 20rem;
  }

  h1 {
    display: none;
  }
  p {
    display: inline-block;
  }
  .input-container {
    flex-direction: column;
    width: 18rem;
  }
}

JavaScript 代码 #

const checkButton = document.getElementById("check-btn");
const textInput = document.getElementById("text-input")
const resultText = document.getElementById("result");
const formData = document.getElementById("palindrome");

checkButton.addEventListener("click", () => {
  const cleanString = textInput.value.replace(/\W|_/g, "");
  const reverseString = cleanString.split("").reverse().join("");

  if (textInput.value === "") {
    alert("Please input a value.")
  } else if (reverseString.toLowerCase() === cleanString.toLowerCase()) {
    resultText.textContent = `${textInput.value} is a palindrome`;
  } else {
    resultText.textContent = `${textInput.value} is not a palindrome`
  }

  formData.reset()
});

我已经尝试了以下几种方法来解决这个问题，但都没有效果：

• 使用 .focus() 方法让输入框重新获得焦点
• 在重置表单前后设置 textInput.disabled = false;
• 不使用 .reset()，而是直接把输入框的 value 设置为空字符串
• 把重置逻辑抽成单独的函数，在事件监听器里调用这个函数
• 设置 readonly = false

有没有大佬能帮我看看问题出在哪，怎么解决这个表单元素重置后无法正常使用的问题？

备注：内容来源于stack exchange，提问作者Jonathan Snyder