Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Roland O'Donnell
Roland O'Donnell
5,667 Points

need help with this problem in html and javascript/jquery

what I'm trying to do is limit the amount of checkboxes able to be checked on a certain condition, if the user selects a certain system i.e. system 8, it will limit the checkboxes able to be checked to 8 and so on.

what I've got works if the user first selects a system to play then checks the numbers they want to play and it does alert if they choose to many. but if they then go back and change the system they want to play it does not update the limit of checkboxes they are able to choose?? I'm confused?? what am i doing wrong???

it does some weird things i don't understand..

  1. if you attempt to check a box before selecting a system to play it will let you check one checkbox then if you try to check a second it will then alert the user to "choose a game"? i don't why it dosent alert on the first attempt? and then you close the alert and you try do the same thing the alert will pop up twice then three then four then five and so on? what is going on?

what am i doing wrong?

HTML:

<form name="gameSelect">
        <label>Choose Your Game</label>

        <select onclick="systemSelected()" id="mySelectBox" class="gameSelect">
            <option id="blankSelect" disabled selected value>Choose a Game</option>
            <option value="6" name="system6"id="system6">System 6: $0.60</option>
            <option value="7" name="system7"id="system7">System 7: $4.20</option>
            <option value="8" name="system8"id="system8">System 8: $16.80</option>
            <option value="9" name="system9"id="system9">System 9: $50.35</option>
            <option value="10" name="system10"id="system10">System 10: $125.90</option>
            <option value="11" name="system11"id="system11">System 11: $276.95</option>
            <option value="12" name="system12"id="system12">System 12: $553.95</option>
            <option value="13" name="system13"id="system13">System 13: $1,028.75</option>
            <option value="14" name="system14"id="system14">System 14: $1,800.30</option>
            <option value="15" name="system15"id="system15">System 15: $3,000.50</option>
            <option value="16" name="system16"id="system16">System 16: $4,800.80</option>
            <option value="17" name="system17"id="system17">System 17: $7,419.40 </option>
            <option value="18" name="system18"id="system18">System 18: $11,129.10</option>
            <option value="19" name="system19"id="system19">System 19: $16,265.65</option>
            <option value="20" name="system20"id="system20">System 20: $23,236.60</option>
        </select>


</form>

///ive created a loop in javascript to append 45 checkboxes to the DOM.////

    <form onclick="limitChecked(systemSelected());" class="numberPicker" name="lottoTicket">

        <label class="numberPickerLabel">Choose Your Lucky Numbers: </label> 

    </form>

JAVASCRIPT:

var userSystemChosen = 0;



function systemSelected(){                                  /////alerts the system selected/////

$('#mySelectBox option').each(function() {
    if(this.selected) {

        userSystemChosen = parseInt(($('#mySelectBox').val()));
    }

});

}



function limitChecked(systemChosen) {                                   /////limits the amount of checkboxes that can be checked/////

$('input[type=checkbox]').change(function(e){
   if ($('input[type=checkbox]:checked').length > systemChosen) {
        $(this).prop('checked', false)
        alert("Sorry too many numbers");
   } else if (userSystemChosen === 0) {

    alert("please choose a system to play");  
}
});
}

///creates the 45 checkboxes and appends to DOM////

for (var t = 1; t <= 45; t++){
    if (t < 10){


        $(".numberPicker").append("<label for='number" + t + "'>" + "0" + t + "</label>")
        $(".numberPicker").append("<input type='checkbox' class='userChecked' id='number" + t + "' value='" + t + "' name='" + t + "'>");



    } else{

        $(".numberPicker").append("<label for='number" + t + "'>" + t + "</label>")

        $(".numberPicker").append("<input type='checkbox' class='userChecked' id='number" + t + "' value='" + t + "' name='" + t + "'>");

    }


}

1 Answer

Rob R
Rob R
14,637 Points
Rob R
Rob R
14,637 Points

Hi Roland, great start!

First, I would recommend using a click method instead of onclick, that's pretty standard now as far as I know. Change your html as follows. (It will work the way you had it if you don't want to do this, just wanted to let you know.)

<select id="mySelectBox" class="gameSelect">

and

<form class="numberPicker" name="lottoTicket">

Instead of using the each method for getting the userSystemChosen variable I would suggest an event handler. This will change the userSystemChosen variable as the user changes it. You can also use the find method instead of the if statement the way you had it. In order to prevent the alert from popping up as it goes through the loop, I would set the alert before the loop and then call the message after the loop, this will show the alert only once as the user tries to select a checkbox. You can also set the checkbox to uncheck as you previously did. Here's what I mean (I didn't include the for loop as I didn't make any changes to that):

var userSystemChosen = 0;



//replace your onclicks with click functions
$('#mySelectBox').click(function(){                                 /////alerts the system selected/////

    //instead of each, use an event handler so it changes as the user selects a new dropdown
    $('select').on('change', function () {
        userSystemChosen = parseInt($('#mySelectBox').find('option:selected').val());
    });

});



$('.numberPicker').click(function(){ /////limits the amount of checkboxes that can be checked/////
//function for alert message            
    var showMsg = function() {
        alert("please choose a system to play");
    }    


    $('input[type=checkbox]').on('change', function() {
     if (userSystemChosen === 0) {
         //remove check box here too
         $(this).prop('checked', false);
     }
     else if ($('input[type=checkbox]:checked').length > userSystemChosen) {
            $(this).prop('checked', false);
            alert("Sorry too many numbers");
     } 


}); 
  //show alert after the event so that it doesn't repeat as the user checks the box
  if (!userSystemChosen) {
      showMsg();  
  }
});

Let me know if that helps!