Как сделать так, чтобы каждая кнопка, которую я нажимаю в своем приложении калькулятора, объединяла числа? - PullRequest
Новая
       15

Как сделать так, чтобы каждая кнопка, которую я нажимаю в своем приложении калькулятора, объединяла числа?

0 голосов
/ 21 января 2020

Я работаю над созданием приложения для калькулятора в качестве моего первого «настоящего» проекта по программированию. Я понимаю, что в Интернете существует большое количество учебных пособий о том, как их создать, но я бы предпочел выяснить, как разбить проблему на более мелкие этапы самостоятельно.

При этом я столкнулся с проблемой, которую не могу решить самостоятельно. Каждая кнопка, которую я нажимаю, заменяет предыдущее значение на значение, назначенное этой кнопке. Я изо всех сил пытаюсь понять, как его запрограммировать, чтобы каждая нажатая кнопка объединяла два значения вместе. (например, «1» и «2» = «12»)

Есть идеи?

Спасибо!

https://codepen.io/tphelps5/pen/GRgBMMZ?editors=1010

JavaScript


let reset = document.getElementById("reset"),
    output = document.getElementById("output"),
    calcButtons = document.getElementById("calc_buttons");

calcButtons.addEventListener("click", printNum, false);

function printNum(e) {
  if (e.target !== e.currentTarget) {
    let clickedItem = e.target.value;
    output.innerHTML = clickedItem;
  }

  e.stopPropagation();
}

HTML 

<HTML> 
  <h1> My First JavaScript Calculator </h2>
  <div id="calculator">

  <div id="calc_buttons">
    <span id="output"></span>

    <button class="operate" id="reset" value=" ">C</button>

    <button class="num" id="seven" value="7">7</button>
    <button class="num" id="eight" value="8">8</button>
    <button class="num" id="nine" value="9">9</button>

    <button class="operate" id="divide" value="/">/</button>


    <button class="num" id="four" value="4">4</button>
    <button class="num" id="five" value="5">5</button>
    <button class="num" id="six" value="6">6</button>

    <button class="operate" id="multiply" value="*">*</button>

    <button class="num" id="one" value="1">1</button>
    <button class="num" id="two" value="2">2</button>
    <button class="num" id="three" value="3">3</button>

    <button class="operate" id="minus" value="-">-</button>


    <button class="num" id="zero" value="0">0</button>

   <button class="operate" id="decimal" value=".">.</button>
   <button class="operate" id="equals" value="=">=</button>


   <button class="operate" id="plus" value="+">+</button>

</div>



</HTML>

Ответы [ 2 ]

0 голосов
/ 21 января 2020

Строка 

output.innerHTML = clickedItem;

заменяет содержимое outer на clickedItem. Попробуйте 

output.innerHTML += clickedItem;

, который вместо этого добавляет его к содержимому.

(Да, + добавляет строки и добавляет числа. Это только изредка вызывает очень запутанные ошибки.)

0 голосов
/ 21 января 2020

Как объединить числа из пользовательского ввода

Отслеживать ввод пользователя для объединения чисел просто.

Вам нужно будет сделать 2 вещи:

  1. Отслеживайте введенные номера, разбивайте их и сохраняйте где-нибудь при вводе оператора
  2. Отслеживайте все введенные номера и операторов 
let arr = []; // contains your list of numbers and operators in the order they were entered
let str = ""; // the current number string
function printNum(e) {
    ...// your own code logic
    if (e.target.value === "+" || e.target.value === "-" || ...) { // all the math operators here OR replace with regex matching
        // for OP: Add logic to handle accidentally pressing >1 operator in succession
        arr.push(str);
        str = "";
        arr.push(e.target.value)
    } else {
        str += e.target.value;
    }
}

В итоге вы получите массив, который выглядит следующим образом: 

 arr = ["12","+","15","*", ...]

Расчет значения массива может быть довольно сложным и будет хорошим упражнением.

Более полный ответ

Моя основная задача состояла в том, чтобы предоставить вам ясное и простое решение, не добавляя слишком много к вашему коду. Перед ответом, пожалуйста, обратите внимание на риски:

Предупреждение. Выполнение JavaScript из строки представляет собой огромный риск для безопасности. Для плохого актера слишком легко запустить произвольный код, когда вы используете eval (). См. Никогда не используйте eval () !, ниже.

Ответ:

Простой (и ленивый способ) - поддерживать строку, которая отслеживает вводимые пользователем данные и выполняет фактическую расчеты с eval.

Это не учитывает неправильные записи пользователя. Например. 1 + 2 ++ 3 + 5 +

Basi c использование: 

let str = "1+3+5";
let ans = eval(str); // ans is now "6"

Здесь вы видите, что строка с правильно сформированными математическими операторами будет eval к окончательному результату уравнения.

Если вам удобен такой подход, вы можете просто сделать: 

let str = ""
function printNum(e) {
    ...// your own code logic
    str += e.target.value;
}

Я опустил полный рабочий пример на тот случай, если вы хотите поработать над Остальная часть проблемы самостоятельно. Если вы хотите получить справку, см. эту ручку .

...