Элементы формы нельзя использовать после отправки. ⇐ CSS

[Anonymous]

Код находится здесь:
https://codepen.io/AthreyuIV/pen/EaYRRrb

Код: Выделить всё

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()
});

Код: Выделить всё

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;
}
}

Код: Выделить всё

Palindrome Checker
Palindrome
Checker



Check

Элементы формы не работают сразу после сброса формы. Кажется, он отключен.
Я попробовал использовать .refocus() и попытался установить textInput.disabled = false; до и после того, как я очистил форму. Я попытался даже не использовать .reset() и вместо этого установить для textContent пустую строку. Я попытался создать функцию сброса вне eventListener и вместо этого вызвать ее как функцию. Я пробовал изменить значение «только для чтения» на false.

Подробнее здесь: https://stackoverflow.com/questions/793 ... submission