Почему прослушиватель событий keyDown случайно запускает неправильную функцию? - PullRequest
0 голосов
/ 26 мая 2020

У меня есть следующий прослушиватель событий, который должен запускать определенные функции при нажатии определенных c клавиш:

document.addEventListener('keydown', function (pressed) {
if ('1234567890-*x/+().'.includes(pressed.key)) {
    let value = pressed.key;
    getInput(value);
}

// pressing c clears display
else if (pressed.keyCode === 67) {
    resetDisplay();
}

// pressing delete key deletes last
else if (pressed.keyCode === 8) {
    delLast();
}

// pressing return/enter key sets equals
else if (pressed.keyCode === 13 || pressed.key === '=') {
    updateHistory();
} else return

})

Похоже, что приведенный выше код работает примерно в 75% случаев, как и ожидалось. Однако случайным образом нажатие именно клавиши Enter вызовет функцию, которая должна быть вызвана нажатием клавиши «c». Я не могу понять, почему это могло происходить. Добавление оператора console.log (loaded.keyCode) в условный блок для клавиши ввода выводит 13 на консоль всякий раз, когда нажимается клавиша Enter, даже если запускается неправильная функция (resetDisplay).

ResetDisplay функция ниже:

function resetDisplay() {
if (string.length == 0) {
    string = '0';
}
document.getElementById('history').innerHTML = 'ans = ' + 
ans;
string = '0';
updateDisplay();
string = '';

}

Функция, вызываемая внутри updateHistory, updateDisplay, выглядит следующим образом:

function updateDisplay() {
document.getElementById("current").innerHTML = string;
}

** Я редактирую, чтобы отметить, что я изменил операторы 'if' в функция для операторов if / else и ma все еще сталкивается с проблемой. Добавление

    console.log(pressed.key);
console.log(pressed.keyCode);

Показывает, что клавиша Enter регистрируется, даже когда вызывается неправильная функция.

Это попытка создать минимально воспроизводимый пример с использованием функций выше. Обратите внимание еще раз, что я не могу заставить это происходить постоянно, кажется, что это происходит примерно в 25% случаев. Ошибка, с которой я сталкиваюсь, заключается в том, что случайным образом при нажатии клавиши ввода div 'history' устанавливается в формат 'ans =', который должен быть результатом нажатия клавиши c.

let string = '';
document.addEventListener('keydown', function(pressed) {
  console.log(pressed.key);
  console.log(pressed.keyCode);

  if ('1234567890-*x/+().'.includes(pressed.key)) {
    let value = pressed.key;
    string = value;
    updateDisplay();
  }
  // pressing c clears display
  else if (pressed.keyCode === 67) {
    resetDisplay();
  }

  // pressing return/enter key sets equals
  else if (pressed.keyCode === 13 || pressed.key === '=') {
    updateDisplay();
    document.getElementById("history").innerHTML = string + ' = ';
  } else return;

})

function resetDisplay() {
  if (string.length == 0) {
    string = '0';
  }

  document.getElementById('history').innerHTML = 'ans = ' +
    string;
  string = '0';
  updateDisplay();
  string = '';
}

function updateDisplay() {
  document.getElementById("current").innerHTML = string;
}
<div id="screen">
  <p id='history'>0</p>
  <p id='current'>0</p>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...