alforoan – 05-45 Oct 24

Hi, I would REALLY REALLY appreciate help with this typing game I'm working on.
const wordsArraySpan = document.querySelector(".words-array");
const input = document.querySelector(".input");
let inputArray = [];
let currentIndex = 0;

input.addEventListener("input", function (e) {
const typedText = this.value.trim();
const words = typedText.split(" ");
let highlightedWords = [];

for (let i = 0; i < wordsArray.length; i++) {
const word = wordsArray[i];
const isMatched = words.includes(word) || inputArray.includes(word);

let highlightedWord = "";

if (i === currentIndex) {
for (let j = 0; j < word.length; j++) {
if (j < typedText.length && word[j] === typedText[j]) {
highlightedWord += `<span class="highlight">${word[j]}</span>`;
} else {
highlightedWord += word[j];
}
}
} else {
highlightedWord = word; // Use the original word for other words
}

highlightedWords.push(
isMatched
? `<span class="highlight">${highlightedWord}</span>`
: highlightedWord
);

if (isMatched && !inputArray.includes(word) && typedText === word) {
if (e.data === " ") {
inputArray.push(word);
this.value = "";
currentIndex++;
}
}
}

wordsArraySpan.innerHTML = highlightedWords.join(" ");
});
const wordsArraySpan = document.querySelector(".words-array");
const input = document.querySelector(".input");
let inputArray = [];
let currentIndex = 0;

input.addEventListener("input", function (e) {
const typedText = this.value.trim();
const words = typedText.split(" ");
let highlightedWords = [];

for (let i = 0; i < wordsArray.length; i++) {
const word = wordsArray[i];
const isMatched = words.includes(word) || inputArray.includes(word);

let highlightedWord = "";

if (i === currentIndex) {
for (let j = 0; j < word.length; j++) {
if (j < typedText.length && word[j] === typedText[j]) {
highlightedWord += `<span class="highlight">${word[j]}</span>`;
} else {
highlightedWord += word[j];
}
}
} else {
highlightedWord = word; // Use the original word for other words
}

highlightedWords.push(
isMatched
? `<span class="highlight">${highlightedWord}</span>`
: highlightedWord
);

if (isMatched && !inputArray.includes(word) && typedText === word) {
if (e.data === " ") {
inputArray.push(word);
this.value = "";
currentIndex++;
}
}
}

wordsArraySpan.innerHTML = highlightedWords.join(" ");
});
demonstration : https://gyazo.com/799af7944fe6cbd9b83050c47515748e problem: as you could see from my gif above, when i finished typing "popper" and pressed spacebar to delete the text in input box, "p" in the next word was auto highlighted because it's in the same index as "p" in "popper". I've been taking forever to fix this, but I have no idea how I can fix it.
UU
Unknown User177d ago
A
Alforoan177d ago
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
A
Alforoan177d ago
yes, so if you ever played play.typeracer.com, that's exactly how i want it to be. it highlights the current word as u type it correctly, press spacebar when the current word is fully matched = delete the input, start typing the next word my problem is when i type matching letters, some letters in other words also get highlighted i guessi couldn't really understand why that'd cause the issue i'm having the way i see it is in the nested for loop
highlightedWord += `<span class="highlight">${word[j]}</span>`;
highlightedWord += `<span class="highlight">${word[j]}</span>`;
that is the reason why letters in other words are highlighted is that right because of my
i === currentIndex
i === currentIndex
check, only the next word is highlighted, but otherwise other words would have similar issues no worries 🙂 wdym? like <span> for start of the word and </span> for the end of the word? but that wouldnt highlight each letter tho right oh wait i see what u mean no idc about that, i just want what i want to work lol
highlightedWord += `<span class="highlight">${word[j]}</span>
highlightedWord += `<span class="highlight">${word[j]}</span>
`; so for that instead of word[j] i would be putting the matching word or something?
UU
Unknown User175d ago