Функция 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]);, и он будет работать в ручке.