CODEWITHSUNDEEP
javascriptjquery
Ben Szucs
Ben Szucs

Reputation: 37

jQuery - Setting limits to number of appends

I am a beginner, working on a personal project, where I am trying to make a tally system for a darts game called 'Cricket'.

Please visit my code below:

https://codepen.io/benszucs/pen/ZXdGxe

jquery:

$(document).ready(function() {
  $('h1').click(function(){
    var mark = $("<h1 class='mark'>I</h1>");
    if ($(".mark").length >= 3) return;
    $(this).closest('.count').append(mark);
  });
});

For each number there are a maximum 3 points(lines) a player can score. I managed to set a limit to the amount of lines I can append, however this applies to the whole application.

What I want is to be able to mark a maximum of three lines to each number (15 -> Bull), for each player.

Is there an easy fix I am missing, or am I approaching the problem in the wrong way?

Thanks

Upvotes: 0

Views: 265

Answers (3)

Thomas
Thomas

Reputation: 12637

how about this?

$(document).ready(function() {
  $('.count').click(function(){
    if ($(this).children().length < 4)
      $(this).append("<h1 class='mark'>I</h1>");
  });
});

  • first, $('h1').click(): this feels wrong/too generic to me. How easy is it to introduce another headline somewhere in the page and forget that there are click listeners attached to it.

    Adding the listener ti a class is way more specific, as you can name the class in a way that you don't use it anywhere else. And the only difference is, that you can now click the whole line, not just the number.

  • var mark = $("<h1 class='mark'>I</h1>");: no need to wrap that into a jquery element yourself, especialln not if you don't know wether it will be added or not. You can sinply pass the template to .append()

  • if(...) return; //else-code: I know this early out approach, and it is very useful to avoid nesting a lot of code into an else-block, but here we're talking about a single line. if..then feels more fluent (as in reading a sentence) than if..abort ... otherwise.

This ain't critique about your apprach. As your code works, and it's only a few lines. It's rather a reflection how I'd set this up, and why.

Upvotes: 0

Paul K
Paul K

Reputation: 76

You need to add the turn functionality to your app so that you can distinguish between whose turn it is currently.

But there is also a solution without that:

$(document).ready(function(){
 $("h1").click(function(){
  var mark = $("<h1 class='mark'>I</h1>");
  var current = ($(this).parents(".player.one").length > 0)?".one":".two";
  if ($(current +" .mark").length >= 3) return;
  $(this).closest('.count').append(mark); 
 });
});

In the code aboue I have added functionality for detection of where the user has clicked. If user clicks on player one's <div class="player one"> then it checks how many points player one has scored and denies it the ability to score again if player one has scored three times already. Same goes for player two.

As you have just started the project I recommend you to disable the other player div until first player finishes his turn. Easiest way I recommend is using pointer-events:none CSS. This can be implemented in the above click listner.

Upvotes: 0

Hedegare
Hedegare

Reputation: 2047

You are counting the elements with the mark class. So when you reach 3 elements, no matter which score, you are unable to add another mark.

A fix to this can be count the mark element from the element you click, something like:

if ($(this).parent().children().length >= 4) return;

In this code you count the number of children (h1 elements) from the score element's parent you clicked.

Upvotes: 1

Related Questions