Question

I have 6 buttons on the page. On every button click, I do the following:

$('#btn1').click(function(){
        $('#txt').val("+");
    }
)

$('#btn2').click(function(){
        $('#txt').val("-");
    }
)

$('#btn3').click(function(){
        $('#txt').val("*");
    }
)

If you observe, the functionality in each click remains the same, the only difference is a new character is added to the textbox. How can i write this generically?

Answer 1

Firstly, I would recommend delegating your event listener, to reduce code clutter. And you can make use of HTML5 data attributes and $.data to get the effect you desire:

<div id="buttons">
  <button id="btn1" data-text="+">Button 1</button>
  <button id="btn2" data-text="-">Button 2</button>
  <button id="btn3" data-text="*">Button 3</button>
</div>

Then in your JS file:

$('#buttons').delegate('button', 'click', function(e) {
  $('#txt').val($(this).data('text'));
});