Прошу объяснить неопытному кодеру почему не работает этот чертов код...(?

Question

[IckiSanZ]

Здравствуйте, не могу понять почему этот код не работает, в моем понимании он должен принять нажатие, записать в переменную keyName значение (например. "s") и сравнить, таким образом в случае если будет введена "s", должно вывести alert. Но получается так что keyName = undefined, даже если я нажимаю клавишу на клавиатуре.

let symbolsCounter = 0;
let mistakesCounter = 0;
function checkUsersKey (levelText) {
	var theEnd = false;
	var counterLetters = 0;
	var keyName;
	while (theEnd != true ) {
		document.addEventListener("keypress", (event) => {
			keyName = event.key;
		})
		if(levelText[counterLetters] == keyName){
			alert("true");
		}

		theEnd = true;
	}
}
checkUsersKey("something");

Comments

[Алексей Ярков]

не работает так как мне надо

А как вам надо?

[Владислав Лысков]

а как тебе надо?

[Александр Аксентьев]

Сейчас видимо достанем хрустальный шар и узнаем как вам надо, а потом и код поправим?)

[IckiSanZ]

Александр Аксентьев, Извините, совсем забыл про объяснение. Поправил вопрос.

[IckiSanZ]

Алексей Ярков, Извините, совсем забыл про объяснение. Поправил вопрос как смог.

[diadiafiodor]

типа такого

var i=0;
function checkUsersKey (levelText) {
  var theEnd = false;i++;console.log(" theEnd: "+theEnd+" i: "+i+" eventKey "+keyName);
  var counterLetters = 0;
  var keyName;
  while (theEnd != true ) {
    document.addEventListener("keypress", (event) => {
let symbolsCounter = 0;
let mistakesCounter = 0;    
  keyName = event.key;
    })
    if(levelText[counterLetters] == keyName){
      console.log(" true "+"******success**********");
    }

    theEnd = true;
  }
};var call = checkUsersKey("y");
setInterval(function(){i++;console.log(i);return checkUsersKey(121)},500);

Answer 1

[Владимир Проскурин]

Старый ответ

let symbolsCounter = 0;
let mistakesCounter = 0;
function checkUsersKey (levelText) {
  var theEnd = false;
  var counterLetters = 0;
  var keyName;
  while (theEnd != true ) {
    document.addEventListener("keypress", (event) => {
      keyName = event.key;
      if(levelText[counterLetters] == keyName){
          alert("true");
      }
    })
    

    theEnd = true;
  }
}
checkUsersKey("something");

Я переписал ваш код, прочитайте комментарии в нем.

// Не очень понятно, зачем эти переменные
let symbolsCounter = 0;
let mistakesCounter = 0;

function checkUsersKey (levelText) {
  var theEnd = false;
  var counterLetters = 0;
  var keyName;
  
  function checkKeyEvent(event) {
    keyName = event.key;
    // Это условие прекращает ваш "цикл". 
    if(theEnd) {
        document.removeEventListener('keypress', checkKeyEvent);
        return;
    }
    if(levelText[counterLetters] == keyName){
        alert("true");
    }
    // У вас в коде почему-то в конце цикла theEnd = true, это значит, что цикл не повторится.
    // Мне кажется это ошибка, но я все равно перенес ее в код для примера.
    // Можете изменять переменную в true например когда получите нужную клавишу. 
    theEnd = true;
  }
  document.addEventListener("keypress", checkKeyEvent);
}
checkUsersKey("something");

Answer 2

[sonca-ca]

Не понятно как именно вы хотите чтобы работал код, но сейчас он работает согласно тому, что вы написали.

Вы написали функцию и вызываете ее один раз. В тот момент, когда вы она выполняется, в переменной keyName действительно еще ничего нет.
Для того, чтобы ваша функция выполняла проверку после нажатия на клавишу, необходимо добавть ее вызов в функцию, которая исполняется по нажатию на клавишу.

var keyName;
var counterLetters = 0;
document.addEventListener("keypress", (event) => {
    keyName = event.key;
    checkUsersKey("something");
});
function checkUsersKey (levelText) {
    if(levelText[counterLetters] == keyName){
        alert("true");
    }
}

Answer 3

[diadiafiodor]

Там такая штука, ваш код принимал нажатие, но event.key не доступен по прямой ссылке, в других областях видимости, кроме непосредственно той где был задан, поэтому надо или делать ссылку на ссылку (хехе) или обрабатывать на месте. Из кода ниже видно как это сделать.

var i=0;var j=0;window.mistake = 2;var guess = 0; var kN=0;var letter = ['s','g','f','v','p','t','m','n','b','l','d',];
function checkUsersKey (levelText) {console.log("press any key");
  var theEnd = false;
  var counterLetters;
  var keyName=0;
  while (theEnd != true ) {
    document.addEventListener("keypress", (event) => {
     keyName = event.key;
	 kN =keyName; 
	 if("y"==keyName){window.mistake = 0}
	 else{window.mistake = 1;}
    })
  if(window.mistake==1){
	  i=i+1;console.log(kN+" no guess "+i+" tyme");
	  window.mistake=2}
	  if(mistake==0){
	  j=j+1;console.log(kN+" guess "+j+" tyme");window.mistake=2}; 
	  theEnd = true;
  };
}

var link = checkUsersKey;setInterval(function(){ return checkUsersKey(letter[j])},500);