Как создать проверку для слушателя onkeydown (для тренажера печати)?

Question

[so_easyy]

Всем доброго времени суток!
Суть в чем: делаю небольшой проект на ванильном js, и немного запуталась.

У меня есть массив из 5 рандомных букв английского алфавита, ставлю слушатель, чтобы проверять, нужная ли клавиша нажата, и пробегаю по массиву циклом, чтобы сопоставить значения. По итогу за 1 нажатие клавиши цикл пробегает по всем элементам (а мне нужно проверить один, и перейти к следующему элементу массива только после нажатия клавиши второй раз).
Как построить код так, чтобы была схема: нажатие клавиши - проверка одного элемента массива - нажатие клавиши - проверка последующего элемента массива? Чувствую, что истина где-то рядом, но она от меня все время ускользает :(
Спасибо!

let arr = []
for (let i = 0; i < 10; i++) {
      let rand = Math.floor(Math.random() * lettersArr_en.length);
      arr.push(lettersArr_en[rand]) // рандомный элемент массива  
}

console.log(arr);


document.onkeydown = function(e) {
      for(let i = 0; i < arr.length; i++) {
            if (arr[i] === e.key) {
                        console.log('=')
                  } else {
                        console.log('no')
                  }  
      }
}

Comments

[RAX7]

let idx = 0;

document.onkeydown = function (e) {
  if (idx >= arr.length) {
    console.log("happy end");
    return;
  }

  if (arr[idx] === e.key) {
    console.log("=");
  }
  else {
    console.log("no");
  }
  
  idx += 1;
};

[so_easyy]

RAX7, Ваш вариант также работает, возьму на заметку) Спасибо!)

Answer 1

[furashcka]

Возможно стоит использовать объект для букв? С ним вообще не понадобится цикл, проверка будет за одно нажатие, мне кажется код проще получается

const randomLetters = {
    q: true,
    w: true,
    e: true,
    r: true,
    t: true,
    y: true,
  };

  const successAnswers = [];

  document.onkeydown = function (e) {
    const key = e.key.toLowerCase();
    const latter = randomLetters[key];

    if (latter === true) {
      successAnswers.push(key);
      delete randomLetters[key];

      console.log(`randomLetters :>>`, randomLetters);
      console.log(`successAnswers :>>`, successAnswers);
    }
  };

Ну а если всё таки нужен массив, то зачем вам пробегаться по массиву "самостоятельно", используйте indexOf, он вернёт нужный index элемента, если найдёт совпадение, если не найдёт вернёт -1

https://developer.mozilla.org/en-US/docs/Web/JavaS...

Comments

[so_easyy]

Ваш вариант очень классный, спасибо!
Однако массив выбрала потому, что буквы могут повторяться. Добавила в вопрос код с массивом, там рандом выбирает нужное количество букв.

[furashcka]

Хм, допустим вы проверяете строку qWertW, в ней повторяется W два раза, что происходит при проверке q?
Например:
1. ввели букву правильно, пользователю в строке подсветили зелёным, происходит переход к след. букве, да?
2. ввели букву неправильно, пользователю в строке подсветили красным, в этом случаи происходит переход к след. букве? Или программа ждёт пока введут правильный ответ?

[Сергей delphinpro]

furashcka, это тренажер печати. Значит пометка неправильного ввода и переход дальше.

[furashcka]

Сергей delphinpro, Если так, тогда достаточно всегда проверять первый пункт в массиве букв, и после его переносить в другой массив, в таком случаи цикл тоже не нужен

const randomLetters = [`q`, `w`, `e`, `r`, `w`, `y`];

document.onkeydown = function (e) {
    const key = e.key.toLowerCase();
    const firstLatter = randomLetters.shift();

    if (key === firstLatter) {
      console.log('=');
    } else {
      console.log('no');
    }
  };

[so_easyy]

furashcka, здорово! А то я все циклами и циклами пыталась, оказывается можно и без них) Большое спасибо, отмечу решение как правильное <3