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

你可以这样做：

＆＃13;

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'));
});

＆＃13;

<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>

＆＃13;

Answer 2

另外，直接传递ID

function calculate (id) {     
	  var amount = $('#amount').val();
	  var year = $('#year').val(); 
	  var tip1 = 0;
	  if (id == "1") {
		tip1 = (1 + 115 / 100);  
	  } 
	  else if (id == "2") {
		tip1 = (1 + 215 / 100);
	  }    
	
	  var tip = Math.pow(tip1, year);
	  var total = amount * tip;
	  $('#tip').val( tip.toFixed(2) );
	  $('#total').val( total.toFixed(2) );
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/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 onclick="calculate(this.id)" id="1">Button1</button>
<button onclick="calculate(this.id)" id="2">Button2</button>

Answer 3

您在错误的地方声明var tip1。

只需使用此方法调用函数calculate(id)。

$('button').click(function(e) {
    calculate(this.id);
});

<强> HTML

<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 id="1">Button1</button>
    <button id="2">Button2</button>
</form>

calculate()功能

function calculate () {     
  var amount = $('#amount').val();
  var year = $('#year').val(); 
  var tip1;
  if (id=="1") {
    tip1 = (1 + 115 / 100);  
  } 
  else if (id=="2") {
    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;
  }

如何在javascript中使用多个按钮来实现相同的功能？

3 个答案: