Alforoan
Alforoanβ€’9mo ago

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.
4 Replies
Unknown User
Unknown Userβ€’9mo ago
Message Not Public
Sign In & Join Server To View
Alforoan
Alforoanβ€’9mo ago
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
Alforoan
Alforoanβ€’9mo 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?
reactibot
reactibotβ€’9mo ago
This thread hasn’t had any activity in 36 hours, so it’s now locked. Threads are closed automatically after 36 hours. If you have a followup question, you may want to reply to this thread so other members know they're related. https://discord.com/channels/102860784329052160/565213527673929729/1166251149779796018