How to use multiple button for same function in javascript?

Question

I am new in javascript. I want to create multiple button with same function and result will be shown in same place. From my code I want to change tip1 value for every button click event. How can I do this? Please help me if any one have any idea.

My codes are below:

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

Tomanow · Accepted Answer · 2015-02-16 11:46:56Z

You can do it like this:

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>

Valijon · Accepted Answer · 2015-02-16 12:01:04Z

Also, by passing ID directly

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>

void · Accepted Answer · 2015-02-16 11:59:30Z

You are declaring var tip1 at wrong places.

Just Use this to call the function 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

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

Collectives™ on Stack Overflow

How to use multiple button for same function in javascript?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related