表单提交时green-tile类已添加但HTML页面未实时更新求助

我希望表单提交时，输入框能立即添加绿色背景。代码会检查输入框字符是否正确，正确就添加green-tile类，但现在只有点击提交后再输入正确字符才会变绿。控制台显示green-tile类已成功添加，但HTML页面没更新。

提供的代码 #

JavaScript #

const submitButton = document.getElementById("submit-button");
submitButton.addEventListener('click', (event) => newWord(event));

const inputElements = [
    document.getElementById("first-row-first-letter"),
    document.getElementById("first-row-second-letter"),
    document.getElementById("first-row-third-letter"),
    document.getElementById("first-row-fourth-letter"),
    document.getElementById("first-row-fifth-letter")
]

const words = ["hello", "windy", "ghost"]

const compareLetters = (newWord, correctWord, inputArray) => {
    for(let i = 0; i < newWord.length; i++) {
        if(newWord[i] === correctWord[i]) {
            console.log(inputArray);
            inputArray[i].classList.add("green-tile");
            console.log(inputArray[i]);
        } else {
            console.log("This letter does not belong here");
        }
    }
}

const newWord = (event) => {
    event.preventDefault();
    const firstLetter = inputElements[0].value;
    const secondLetter = inputElements[1].value;
    const thirdLetter = inputElements[2].value;
    const fourthLetter = inputElements[3].value;
    const fifthLetter = inputElements[4].value;
    
    const wordGuess = firstLetter + secondLetter + thirdLetter + fourthLetter + fifthLetter;
    console.log(wordGuess);
    compareLetters(wordGuess, words[0], inputElements);
};

CSS #

:root {
    --large-font: 2rem;
    --small-font: 1.15rem;
}

* {
    font-family: 'Raleway', sans-serif;
    padding: 0;
    margin: 0;
}

.center {
    text-align: center;
}

.letter {
    font-size: var(--large-font);
    text-align: center;
    text-transform: uppercase;
    width: 3rem;
    height: 3rem;
    border: 0.15rem solid rgb(201, 201, 201);
}

.center-button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 4rem;
    margin-top: 1.5rem;;
}

.title {
    padding-top: 5rem;
}

.first-row {
    padding-top: 2.5rem;
}

button {
    border: none;
    padding: 1rem;
    font-size: var(--small-font);
    border-radius: 15%;
}

.green-tile {
    background-color: green;
}

HTML #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="stylesheets/main.css" />
    <title>Wordle Challenge</title>
</head>
<body>
    <h1 class="title center">Wordle</h1>
    <form class="center first-row">
        <input type="text" id="first-row-first-letter" name="first-row-first-letter" class="letter center"/>
        <input type="text" id="first-row-second-letter" name="first-row-second-letter" class="letter center"/>
        <input type="text" id="first-row-third-letter" name="first-row-third-letter" class="letter center"/>
        <input type="text" id="first-row-fourth-letter" name="first-row-fourth-letter" class="letter center"/>
        <input type="text" id="first-row-fifth-letter" name="first-row-fifth-letter" class="letter center"/>
        <div class="center-button">
          <button type="submit" id="submit-button">ENTER</button>  
        </div>
    </form>
    <script type="module" src="scripts/main.js" ></script>
</body>
</html>

解决方案 #

1. 统一字符大小写 #

输入框设置了text-transform: uppercase，会让内容显示为大写，但input.value获取的是用户输入的原始字符（比如小写），而正确单词words[0]是全小写。当用户输入大写字母时，字符对比会失败，导致green-tile类没真正添加。

修改newWord函数，将拼接后的单词转为小写：

const wordGuess = (firstLetter + secondLetter + thirdLetter + fourthLetter + fifthLetter).toLowerCase();

2. 提升CSS选择器优先级 #

如果green-tile的背景色没生效，可能是选择器优先级不足。修改CSS，让.green-tile的优先级更高：

.letter.green-tile {
    background-color: green;
}

3. 移除重复函数定义 #

代码中存在两个compareLetters函数（一个export版本，一个主JS内的定义），可能导致逻辑冲突，保留一个即可。

完成以上修改后，点击提交按钮时，正确的输入框会立即显示绿色背景。

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