Как сделать мини-калькулятор, использующий одно слушатель событий вместо событий onclick в каждой кнопке? - PullRequest
Новая
       14

Как сделать мини-калькулятор, использующий одно слушатель событий вместо событий onclick в каждой кнопке?

0 голосов
/ 25 апреля 2020

Задача состоит в том, чтобы сделать простой мини калькулятор с одним входом, 4 кнопками и выходом. На входе нужно добавить число, которое сразу же появится на выходе, затем я выберу одну из четырех кнопок (+, -, *, /) для выполнения математических операций, а затем снова запишу еще одно число на входе. В выводе появится результат этой операции, в дальнейшем мы продолжим выполнять математику, снова нажав на кнопки и добавив еще одно число, и актуализируя всегда результат.

Я делал это раньше с событием onclick в каждой кнопке и с помощью подсказки для записи чисел. Теперь я хочу использовать ввод для записи чисел и использования одного слушателя событий для всех кнопок. Кто-нибудь может помочь мне с решением и объяснить мне каждый шаг?

Это мой код: 

let input =document.querySelector('#input');
let output =document.querySelector('#output');
let divButtons = document.querySelector('#buttons');


let messageOutput = (message) =>{
   output.innerHTML = message;
}

messageOutput(input.value); // this doesn't work. What I miss to do show the input in the output?


divButtons.addEventListener('click', () =>{
 //do something

})


<section class="container">

  <h1 class="heading">Do some maths</h1>

  <div class="calculator">

  <input class="inputNumbers" id="input" type="number" placeholder="choose a number here">

  <div class="buttons" id="buttons">
       <button id="plus" class="btn btn-plus">+</button>
       <button id="minus" class="btn btn-minus">-</button>
       <button id="multiply" class="btn btn-multiply">*</button>
       <button id="divide" class="btn btn-divide">/</button>
 </div>

 <div id="output" class="visor"></div>
 </div>

</section>

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

Ответы [ 4 ]

4 голосов
/ 01 мая 2020

Немного изменил код JS, используя прослушиватель, который вы уже написали, дайте мне знать, если вам нужно больше объяснений. Надеюсь, это поможет. 

let input =document.querySelector('#input');
let output =document.querySelector('#output');
let divButtons = document.querySelector('#buttons');

let a = null;
let b = null;
let op = null;

let messageOutput = (message) =>{
   output.innerHTML = message;
}

messageOutput(input.value); // this doesn't work. What I miss to do show the input in the output?


divButtons.addEventListener('click', (event) =>{
 //checking if button is pressed
 if(event.target.type = 'submit') {
  //if a is not set before, meaning first time input
  if(a == null) {
    a = Number(input.value);
  } else {
    // second number
    b = Number(input.value);
    if(op == 'plus') {
      a += b;
    } else if(op == 'minus') {
      a -= b;
    }else if(op == 'multiply') {
      a *= b;
    } else {
      a /= b;
    }
  }
  //saving the operator that was pressed
  op = event.target.id;
  //showing output
  output.innerHTML = a + " " + op;

  //resetting input on each button pressed.
  input.value = '';
 }
});
<section class="container">

  <h1 class="heading">Do some maths</h1>

  <div class="calculator">

  <input class="inputNumbers" id="input" type="number" placeholder="choose a number here">

  <div class="buttons" id="buttons">
       <button id="plus" class="btn btn-plus">+</button>
       <button id="minus" class="btn btn-minus">-</button>
       <button id="multiply" class="btn btn-multiply">*</button>
       <button id="divide" class="btn btn-divide">/</button>
 </div>

 <div id="output" class="visor"></div>
 </div>

</section>
3 голосов
/ 04 мая 2020

Надеюсь, это поможет. Немного изменил ваш фрагмент и добавил несколько переменных. 

let input = document.querySelector("#input");
let output = document.querySelector("#output");
let divButtons = document.querySelector("#buttons");

let result = null;
let selectedOperation = null;

let messageOutput = message => {
  output.innerHTML = message;
};

divButtons.addEventListener("click", event => {
  //do something
  let id = event.target.id;
  let value = parseInt(input.value);

  switch (selectedOperation) {
    case "plus":
      result += value;
      break;

    case "minus":
      result -= value;
      break;

    case "multiply":
      result *= value;
      break;

    case "divide":
      result /= value;
      break;

    default:
      result = value;
      break;
  }

  selectedOperation = id;
  input.value = "";
  messageOutput(`${result} ${selectedOperation}`);
});
2 голосов
/ 28 апреля 2020

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

Как то так: 

let input = document.querySelector('#input');
let output = document.querySelector('#output');
let inputnumber = 0;
let subtotal = 0;
let total = 0;
let calculate = 0;
let x;
let y;
input.oninput = (e) => {
    if(subtotal == 0) {
        output.value = e.target.value;
    }
    x = Number(e.target.value);
    y = Number(subtotal);
    switch (calculate) {
        case "btn-divide":
        calc = y / x;
        break;
        case "btn-multiply":
        calc = y * x;
        break;
        case "btn-plus":
        calc =  x + y;
        break;
        case "btn-minus":
        calc = y - x;
        break;
        case 0:
        calc = x;
        break;
    }
    output.value = calc;
}
const divs = document.querySelectorAll('#buttons');
divs.forEach(el => el.addEventListener('click', event => {
    calculate = event.target.classList[1];
    input.value = null;
    subtotal = calc;
}));
<section class="container">

  <h1 class="heading">Do some maths</h1>

  <div class="calculator">

  <input class="inputNumbers" id="input" type="number" placeholder="choose a number here">
  
  <div class="buttons" id="buttons">
       <button id="plus" class="btn btn-plus">+</button>
       <button id="minus" class="btn btn-minus">-</button>
       <button id="multiply" class="btn btn-multiply">*</button>
       <button id="divide" class="btn btn-divide">/</button>
 </div>

 <input id="output" type="number" class="visor" value=0>
 </div>

</section>
0 голосов
/ 25 апреля 2020

Термин, который вы ищете, называется делегированием события. 

let input =document.querySelector('#input');
let output =document.querySelector('#output');
let divButtons = document.querySelector('#buttons');


let messageOutput = (message) =>{
   output.innerHTML = message;
}

messageOutput(input.value); // this doesn't work. What I miss to do show the input in the output?


divButtons.addEventListener('click', (e) =>{
 console.log(e.target.id)

})
<section class="container">

  <h1 class="heading">Do some maths</h1>

  <div class="calculator">

  <input class="inputNumbers" id="input" type="number" placeholder="choose a number here">

  <div class="buttons" id="buttons">
       <button id="plus" class="btn btn-plus">+</button>
       <button id="minus" class="btn btn-minus">-</button>
       <button id="multiply" class="btn btn-multiply">*</button>
       <button id="divide" class="btn btn-divide">/</button>
 </div>

 <div id="output" class="visor"></div>
 </div>

</section>

По сути, вы не прикрепляете прослушиватели событий к каждому элементу, но прикрепляете одно и то же событие к родительскому элементу всех элементов и можете отслеживать источник события, используя e. цель.

...