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]) {

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

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

        changeColor(wordIndex);

    }

到

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

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

        changeColor(i);

    }

作为：

• 寻找您已经知道的索引是没有意义的（i在这种情况下）

• indexOf 仅返回第一次出现的索引，因此您的脚本仅适用于第一次出现...

Answer 2

indexOf()将为您提供值出现的第一个索引。

因此，如果您的数组包含重复的单词，您将找到第一次找到该单词的索引，而不是重复单词的索引。

.lastIndexOf()幸运的是，数组也有这个方法。

换成笔就可以了let wordIndex = words.indexOf(words[i]);。let wordIndex = words.lastIndexOf(words[i]);