javascript - 如何在javascript中为同一功能使用多个按钮？

Question

我是 JavaScript 的新手。我想创建多个具有相同功能的按钮，结果将显示在同一个地方。在我的代码中，我想为每个按钮单击事件更改 tip1 值。我怎样才能做到这一点？如果有人有任何想法，请帮助我。

我的代码如下:

<form id="calculator">
    <p>Amount: <input id="amount" /></p>
    <p>Years: <input id="year" /></p>
    <hr />
    <p>Tip: <input id="tip" disabled="disabled" /></p>
    <p>Total: <input id="total" disabled="disabled" /></p>
    <button onclick="calculate()" id="1">Button1</button>
    <button onclick="calculate1()" id="2">Button2</button>
</form>

<script type="text/javascript">

  function calculate () {     
  var amount = $('#amount').val();
  var year = $('#year').val(); 
  if (button 1) {
    var tip1 = (1 + 115 / 100);  
  } 
  else if (button 2) {
    var tip1 = (1 + 215 / 100);
  }    

  var tip = Math.pow(tip1, year);
  var total = amount * tip;
  $('#tip').val( tip.toFixed(2) );
  $('#total').val( total.toFixed(2) );
  return false;
  }

  $('#calculator').submit( calculate );
</script>

Answer 1

你可以这样做:

function calculateF(target) {
    var amount = parseFloat($('#amount').val());
    var year = parseFloat($('#year').val());

    if (target == 1) {
        var tip1 = (1 + 115 / 100);
    } else if (target == 2) {
        var tip1 = (1 + 215 / 100);
    }
    
    var tip = Math.pow(tip1, year);
    var total = amount * tip;
    $('#tip').val(tip.toFixed(2));
    $('#total').val(total.toFixed(2));
    return false;
}

$('button').click(function(e) {
    calculateF($(e.target).prop('id'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

    <p>Amount: <input id="amount" /></p>
    <p>Years: <input id="year" /></p>
    <hr />
    <p>Tip: <input id="tip" disabled="disabled" /></p>
    <p>Total: <input id="total" disabled="disabled" /></p>
    <button id="1">Button1</button>
    <button id="2">Button2</button>