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.

Gyazo

Gyazo Screen Video

4 Replies

Unknown User•10mo ago

Message Not Public

Alforoan•10mo ago

https://jsfiddle.net/x2ksu54h/ here u go

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

Alforoan•10mo 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•10mo 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