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

Я делаю простой калькулятор.

Я добавил прослушиватель событий и console.info(), чтобы распечатать свое событие и посмотреть, что произойдет, но я заметил, что оно срабатывает только тогда, когда я снова нажимаю на калькулятор.

// stores the results of the equations
let runningTotal = 0;  
// displays it's value on the screen
let buffer = "0"; 
// stores the last inputed operator (+,-,*,/)
let previousOperator; 

const screen = document.querySelector('.screen');

function inputKeys(value){
    if (isNaN(value)){
        handleSymbol(value);
    } else {
        handleNumber(value);
    }

    screen.innerText = buffer;
}

function handleSymbol(symbol){
    switch (symbol) {
        case 'C':
            buffer = '0';
            runningTotal = 0;
            break;
        case '=':
            if (previousOperator === null) return;
            
            flushOperation(parseFloat(buffer));
            previousOperator = null;
            buffer = runningTotal;
            runningTotal = 0;
            
            break;
        case '←':
            if (buffer.length === 1)
                buffer = '0';
            else
                buffer = buffer.toString(0, buffer.length - 1)
                
            break;
        case '+':
        case '−':
        case '×':
        case '÷':
            handleMath(symbol);
            break;
        case '.':
            handleDecimal(symbol);
            break;
    }
}

function handleNumber(numberString){
    if (buffer === "0"){
        buffer = numberString;
    } else {
        buffer += numberString;
    }
}

function handleDecimal(symbol) {
    if (!buffer.includes(symbol)){
        buffer += symbol;
    } else {
        return;
    }
}

function handleMath(symbol){
    if (buffer === '0') return; 

    const floatBuffer = parseFloat(buffer);

    if (runningTotal === 0){
        runningTotal = floatBuffer;
    } else {
        flushOperation(floatBuffer);
    }
    previousOperator = symbol;
    buffer = '0';
}

function flushOperation(floatBuffer) {
    if (previousOperator === '+'){
        runningTotal += floatBuffer;
    } else if (previousOperator === '−'){
        runningTotal -= floatBuffer;
    } else if (previousOperator === '×'){
        runningTotal *= floatBuffer;
    } else if (previousOperator === '÷'){
        runningTotal /= floatBuffer;
    }
}

function init(){
    document.querySelector('.calc-buttons').addEventListener('keydown', function (event) {
        console.info(event);
    })
    document.querySelector('.calc-buttons').addEventListener('click', function (event) {
        inputKeys(event.target.innerText);
    })
}

init();
<div class = "wrapper">
  <section class = "screen">0</section>

  <section class = "calc-buttons">

    <div class=calc-button-row>
      <button class = "calc-button double">
          C
      </button>
      <button class = "calc-button">
          &larr;
      </button>
      <button class = " calc-button">
          &divide;
      </button>

    </div>

      <div class = "calc-button-row">
        <button class = "calc-button">
            7
        </button>
        <button class = "calc-button">
            8
        </button>
        <button class = "calc-button">
            9
        </button>
        <button class = "calc-button">
            &times;
        </button>
      </div>

      <div class = "calc-button-row">
        <button class = "calc-button">
            4
        </button>
        <button class = "calc-button">
            5
        </button>
        <button class = "calc-button">
            6
        </button>
        <button class = "calc-button">
            &minus;
        </button>
      </div>

      <div class = "calc-button-row">
        <button class = "calc-button">
            1
        </button>
        <button class = "calc-button">
            2
        </button>
        <button class = "calc-button">
            3
        </button>
        <button class = "calc-button">
            &plus;
        </button>
      </div>

      <div class = "calc-button-row">
        <button class = "calc-button double">
            0
        </button>
        <button class = "calc-button">
            .
        </button>
        <button class = "calc-button">
            &equals;
        </button>
      </div>

  </section>
</div>

Обновлено: только что заметил, что мой «кейс» ← тоже не работает.

Не могли бы вы добавить свой script.js, чтобы мы могли видеть, как вы добавляете обработчики событий?

PaulProgrammer 07.12.2022 04:06

Извините, я редактировал сценарий @PaulProgrammer. Должно быть сделано сейчас.

Gabriel Nunes 07.12.2022 04:12
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
2
59
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы добавляете слушателя keydown на калькулятор. Вот почему вы должны сначала нажать на калькулятор, прежде чем использовать ввод с клавиатуры. Сначала вы должны сосредоточиться на элементе.

Вместо этого добавьте прослушиватель keydown в document. Вот пример:

let runningTotal = 0; //stores the results of the equations
let buffer = "0"; //displays it's value on the screen
let previousOperator; //stores the last inputed operator (+,-,*,/)

const screen = document.querySelector('.screen');

function inputKeys(value) {

  if (isNaN(value))
    handleSymbol(value);
  else
    handleNumber(value);

  screen.innerText = buffer;
}

function handleSymbol(symbol) {
  switch (symbol) {
    case 'C':
      buffer = '0';
      runningTotal = 0;
      break;
    case '=':
      if (previousOperator === null) {
        return
      }
      flushOperation(parseFloat(buffer));
      previousOperator = null;
      buffer = runningTotal;
      runningTotal = 0;
      break;
    case '←':
      if (buffer.length === 1)
        buffer = '0';
      else
        buffer = buffer.toString(0, buffer.length - 1)
      break;
    case '+':
    case '−':
    case '×':
    case '÷':
      handleMath(symbol);
      break;
    case '.':
      handleDecimal(symbol);
      break;
  }
}

function handleNumber(numberString) {
  if (buffer === "0") {
    buffer = numberString;
  } else {
    buffer += numberString;
  }
}

function handleDecimal(symbol) {
  if (!buffer.includes(symbol)) {
    buffer += symbol;
  } else {
    return;
  }
}

function handleMath(symbol) {
  if (buffer === '0') {
    return;
  }
  const floatBuffer = parseFloat(buffer);

  if (runningTotal === 0) {
    runningTotal = floatBuffer;
  } else {
    flushOperation(floatBuffer);
  }
  previousOperator = symbol;
  buffer = '0';
}

function flushOperation(floatBuffer) {
  if (previousOperator === '+') {
    runningTotal += floatBuffer;
  } else if (previousOperator === '−') {
    runningTotal -= floatBuffer;
  } else if (previousOperator === '×') {
    runningTotal *= floatBuffer;
  } else if (previousOperator === '÷') {
    runningTotal /= floatBuffer;
  }
}

function init() {

  document.addEventListener('keydown', function(event) {
    inputKeys(event.key)
  })
  document.querySelector('.calc-buttons').addEventListener('click', function(event) {
    inputKeys(event.target.innerText);
  })
}
init();
<!DOCTYPE html>
<html lang = "en">

<head>
  <meta charset = "UTF-8">
  <meta http-equiv = "X-UA-Compatible" content = "IE=edge">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <link rel = "stylesheet" href = "style.css">
  <title>CALCULADORA DO NUNES</title>
</head>

<body>

  <div class = "wrapper">

    <section class = "screen">0</section>
    <section class = "calc-buttons">
      <div class=calc-button-row>
        <button class = "calc-button double">
                    C
                </button>
        <button class = "calc-button">
                    &larr;
                </button>
        <button class = " calc-button">
                    &divide;
                </button>

      </div>

      <div class = "calc-button-row">
        <button class = "calc-button">
                    7
                </button>
        <button class = "calc-button">
                    8
                </button>
        <button class = "calc-button">
                    9
                </button>
        <button class = "calc-button">
                    &times;
                </button>
      </div>

      <div class = "calc-button-row">
        <button class = "calc-button">
                    4
                </button>
        <button class = "calc-button">
                    5
                </button>
        <button class = "calc-button">
                    6
                </button>
        <button class = "calc-button">
                    &minus;
                </button>
      </div>

      <div class = "calc-button-row">
        <button class = "calc-button">
                    1
                </button>
        <button class = "calc-button">
                    2
                </button>
        <button class = "calc-button">
                    3
                </button>
        <button class = "calc-button">
                    &plus;
                </button>
      </div>

      <div class = "calc-button-row">
        <button class = "calc-button double">
                    0
                </button>
        <button class = "calc-button">
                    .
                </button>
        <button class = "calc-button">
                    &equals;
                </button>
      </div>
    </section>

  </div>

  <script src = "script.js"></script>

</body>

</html>

Это первая подсказка для вас. Попробуйте использовать slice вместо case '←'. Просто console.info(buffer); перед нарезкой и после, чтобы проверить результат.

Другие вопросы по теме