jQuery multiple on click event handler with different function argument, refactor.

Question

I have the following HTML code, with the following jQuery code, referencing a constructor called Game, and a function called roll. I pass a different argument to each of the even handlers, based on which button you press in the HTML file, however I was wondering how you would refactor this? Many thanks

HTML Code:

<section>
      <h1>Score:</h1>
      <h1 id="score"></h1>
      <p>
        <button id="1">1</button>
        <button id="2">2</button>
        <button id="3">3</button>
        <button id="4">4</button>
        <button id="5">5</button>
        <button id="6">6</button>
        <button id="7">7</button>
        <button id="8">8</button>
        <button id="9">9</button>
        <button id="10">10</button>
      </p>
    </section>

jQuery Code:

$(document).ready(function() {
  var game = new Game();
  $('#score').text(game.score());
  $('#1').on('click', function() {
    game.roll(1);
    $('#score').text(game.score());
  });
  $('#2').on('click', function() {
    game.roll(2);
    $('#score').text(game.score());
  });
  $('#3').on('click', function() {
    game.roll(3);
    $('#score').text(game.score());
  });
  $('#4').on('click', function() {
    game.roll(4);
    $('#score').text(game.score());
  });
  $('#5').on('click', function() {
    game.roll(5);
    $('#score').text(game.score());
  });
  $('#6').on('click', function() {
    game.roll(6);
    $('#score').text(game.score());
  });
  $('#7').on('click', function() {
    game.roll(7);
    $('#score').text(game.score());
  });
  $('#8').on('click', function() {
    game.roll(8);
    $('#score').text(game.score());
  });
  $('#9').on('click', function() {
    game.roll(9);
    $('#score').text(game.score());
  });
  $('#10').on('click', function() {
    game.roll(10);
    $('#score').text(game.score());
  });

});

Ahsan · Accepted Answer · 2016-06-30 20:28:58Z

1

Try the following, you can get rid of all the redundant event handlers.

HTML

<section>
      <h1>Score:</h1>
      <h1 id="score"></h1>
      <p>
        <button data-id="1" id="1">1</button>
        <button data-id="2" id="2">2</button>
        <button data-id="3" id="3">3</button>
        <button data-id="4" id="4">4</button>
        ..........
      </p>
</section>

JQUERY

$('button').click(function(){
    var id = $(this).data('id')
    game.roll(id);
    $('#score').text(game.score());
});

edited Jun 30, 2016 at 20:28

answered Jun 30, 2016 at 20:13

Ahsan

2,5182 gold badges24 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Felipe Guerra Over a year ago

Don't forget to convert id to integer!!

Felipe Guerra · Accepted Answer · 2016-06-30 20:12:54Z

I suggest two differents approachs:

1)Use a server side language, such as PHP or even a framework for generating the layout dinamicaly

2)Use the same structure, try to apply the following code:

 <section>
  <h1>Score:</h1>
  <h1 id="score"></h1>
  <p>
    <button class="gameBtn" id="1">1</button>
    <button class="gameBtn" id="2">2</button>
    <button class="gameBtn" id="3">3</button>
    <button class="gameBtn" id="4">4</button>
    <button class="gameBtn" id="5">5</button>
        <button class="gameBtn" id="6">6</button>
        <button class="gameBtn" id="7">7</button>
        <button class="gameBtn" id="8">8</button>
        <button class="gameBtn" id="9">9</button>
        <button class="gameBtn" id="10">10</button>
      </p>
    </section>

And jquery:

$(document).ready(function() {
var game = new Game();
$('#score').text(game.score());
$('.gameBtn').on('click', function() {
game.roll(parseInt($(this).attr('id')));
$('#score').text(game.score());
});

});

skrause · Accepted Answer · 2016-06-30 20:15:10Z

0

You could do something like the following:

$(document).ready(function() {
  var game = new Game();
  $('#score').text(game.score());
  $('.some_class').on('click', function(){
        game.roll($(this).attr('id'));
        $('#score').text(game.score());
  });
});

answered Jun 30, 2016 at 20:15

skrause

1081 silver badge6 bronze badges

Comments

Lucas Lellis · Accepted Answer · 2016-06-30 20:15:22Z

0

You can put class called "call-roll" (fr example) in each of the buttons and se your js code to something like this:

$(document).ready(function(){
    $('.call-roll').click(function(){
    	var value = $(this).text();
    	game.roll(value);
    	$('#score').text(game.score());
    });
});

answered Jun 30, 2016 at 20:15

Lucas Lellis

113 bronze badges

Collectives™ on Stack Overflow

jQuery multiple on click event handler with different function argument, refactor.

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related