Добавление значение в input через кнопки

263

23 января 2018, 11:14

var balance = 3000; // доступный баланс

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input type="text" id="bet-sum"> 
<div class="buttons"> 
  <button type="submit">+10</button> 
  <button type="submit">+100</button> 
  <button type="submit">+1k</button> 
  <button type="submit">1/2 (разделить на 2)</button> 
  <button type="submit">x2 (умножить на 2)</button> 
  <button type="submit">all (весь баланс (var balance))</button> 
</div>

Как правильно и красиво реализовать функцию прибавления значение в input с помощью Jquery.

мое решение:

function updateBalance(data) {
  var input_val = $("bet-sum").val();
  switch(data) {
    case "x2": input_val * 2;
    break;
    case "+100": input_val + 100;
    break;
    case "+1k": input_val + 100;
    break;
    case "1/2": input_val / 2;
    break;
    case "all": input_val = balance;
    break;
    default: input_val = input_val;
  }
}

можно ли его как-то улучшить?

Answer 1

Можно хранить вспомогательную информацию в data-атрибутах и использовать её для выбора операции.

let buttons = document.getElementById('buttons'); 
let balance = document.getElementById('balance'); 
buttons.addEventListener('click', updateBalance); 
 
const functions = { 
  '+': (a, b) => a + b, 
  '*': (a, b) => a * b, 
  '=': (a, b) => b, 
}; 
 
function updateBalance(event) { 
  let button = event.target; 
  if (button.tagName.toLowerCase() !== 'button') 
    return; 
   
  let currentBalance = +balance.value 
  let func = functions[button.dataset.function]; 
  let parameter = +button.dataset.parameter; 
  balance.value = func(currentBalance, parameter); 
}

<input id="balance" value="0"> 
<div id="buttons"> 
  <button data-function="+" data-parameter="10">+10</button> 
  <button data-function="+" data-parameter="100">+100</button> 
  <button data-function="+" data-parameter="1000">+1k</button> 
  <button data-function="*" data-parameter=".5">1/2 (разделить на 2)</button> 
  <button data-function="*" data-parameter="2">x2 (умножить на 2)</button> 
  <button data-function="=" data-parameter="3000">all (весь баланс (var balance))</button> 
</div>