JS函数如果重复则不会改变HTML文本的颜色

Question

我很难为这个问题选择一个标题，但我会尽力在下面解释。

我制作了这个检查器，它可以一一检查输入的单词，如果单词输入正确，它会将颜色更改为绿色。它通过将输入拆分为单独的单词并将其放入数组中来实现。

但我看到的是，如果我将输入单词与文本中的重复单词进行比较，它不会改变颜色。为什么会这样呢？我看到更改颜色的函数采用的是单词在数组中的位置，而不是其值，然后简单地添加 html 元素的颜色。

let text = document.querySelector('.card-body').innerHTML;

let splitText = text.split(' ');

let userInput = document.querySelector('.form-control');

userInput.addEventListener('input', acceptInput)

let correctWords = [];

let mistakes = 0;

let words = [];

function acceptInput() {

    userInput.onkeydown = function(e){

        if(e.keyCode == 32){

            words = userInput.value.split(' ');        

            console.log(words); 

            console.log(splitText);

            let position = words.length-1;

            compareWordsArrays(position);

        }

    }

}

function compareWordsArrays(position) {

    

    for(i = position; i < words.length; i++) {

        if(words[i] === splitText[i]) {

            console.log(`Correct word detected: ${words[i]}`);

            let wordIndex = words.indexOf(words[i]);

            changeColor(wordIndex);

        } else {

            console.log('Incorrect word;');

            mistakes += 1;

            console.log(mistakes);

            

        }

    }

    

}

function changeColor(pos) {

    splitText[pos]="<font color=green>"+splitText[pos]+"</font>";

    let c = splitText.join(' ');

    document.querySelector('.card-body').innerHTML = c;

}

 <div class="card">

    <div class="card-body">Random text that appears from some generator or some stuff. But it needs to have quite few text, actually.

     </div>

</div>

<input type="text" class="form-control">

在我的示例中，您可以看到单词“some”在句子中重复两次，而第二个单词“some”没有被更改，尽管它不将第二个单词算作错误，我也不希望我说得足够清楚。

Answer 1

只是改变if(words[i] === splitText[i]) {&nbsp; &nbsp; &nbsp; &nbsp; console.log(`Correct word detected: ${words[i]}`);&nbsp; &nbsp; &nbsp; &nbsp; let wordIndex = words.indexOf(words[i]);&nbsp; &nbsp; &nbsp; &nbsp; changeColor(wordIndex);&nbsp; &nbsp; }到if(words[i] === splitText[i]) {&nbsp; &nbsp; &nbsp; &nbsp; console.log(`Correct word detected: ${words[i]}`);&nbsp; &nbsp; &nbsp; &nbsp; changeColor(i);&nbsp; &nbsp; }作为：寻找您已经知道的索引是没有意义的（i在这种情况下）indexOf 仅返回第一次出现的索引，因此您的脚本仅适用于第一次出现...

Answer 2

indexOf()将为您提供值出现的第一个索引。因此，如果您的数组包含重复的单词，您将找到第一次找到该单词的索引，而不是重复单词的索引。.lastIndexOf()幸运的是，数组也有这个方法。换成笔就可以了let wordIndex = words.indexOf(words[i]);。let wordIndex = words.lastIndexOf(words[i]);