Change option on button click

Question

I am trying to write a userscript that will add buttons underneath a dropdown and change the value based on what button is clicked. There are 3 separate dropdowns given here:

<fieldset>
<div style="float: left;">
<div><label>Number of big seeds</label> <select class="form-control" name="big"> <optgroup label="big"><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></optgroup> </select></div>

<div><label>Number of small seeds</label> <select class="form-control" name="small"><optgroup label="small"><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></optgroup> </select></div>

<div><label>Number of tiny seeds</label> <select class="form-control" name="tiny"><optgroup label="tiny"><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option> </optgroup> </select></div>

And here is my failed attempt at a userscript:

$(document).ready(function() {

    //Variables for buttons
    var $0 = $('<button type="button" class="0" id="0">0</button>');
    var $1 = $('<button type="button" class="0" id="1">1</button>');
    var $2 = $('<button type="button" class="0" id="2">2</button>');
    var $3 = $('<button type="button" class="0" id="3">3</button>');
    var $4 = $('<button type="button" class="0" id="4">4</button>');
    var $5 = $('<button type="button" class="0" id="5">5</button>');

    var $6 = $('<button type="button" class="1" id="0">0</button>');
    var $7 = $('<button type="button" class="1" id="1">1</button>');
    var $8 = $('<button type="button" class="1" id="2">2</button>');
    var $9 = $('<button type="button" class="1" id="3">3</button>');
    var $10 = $('<button type="button" class="1" id="4">4</button>');
    var $11 = $('<button type="button" class="1" id="5">5</button>');

    var $12 = $('<button type="button" class="2" id="0">0</button>');
    var $13 = $('<button type="button" class="2" id="1">1</button>');
    var $14 = $('<button type="button" class="2" id="2">2</button>');
    var $15 = $('<button type="button" class="2" id="3">3</button>');
    var $16 = $('<button type="button" class="2" id="4">4</button>');
    var $17 = $('<button type="button" class="2" id="5">5</button>');


    //Add buttons
    $('.form-control').eq(0).after($0,$1,$2,$3,$4,$5);
    $('.form-control').eq(1).after($6,$7,$8,$9,$10,$11);
    $('.form-control').eq(2).after($12,$13,$14,$15,$16,$17);

});

//Click event
$(":button").click(function(){
     var thisClass = parseInt($(this).attr('class'));
     var thisID = parseInt($(this).attr('id'));

     $('.form-control').eq(thisClass).val(thisID);
});

Can someone tell me where I'm going wrong?

Answer 1

You're binding the click event immediately, but not adding the buttons until the document is ready. Put the .click() call inside $(document).ready() after it appends the buttons.

$(document).ready(function() {

    //Variables for buttons
    var $0 = $('<button type="button" data-index="0" data-value="0">0</button>');
    var $1 = $('<button type="button" data-index="0" data-value="1">1</button>');
    var $2 = $('<button type="button" data-index="0" data-value="2">2</button>');
    var $3 = $('<button type="button" data-index="0" data-value="3">3</button>');
    var $4 = $('<button type="button" data-index="0" data-value="4">4</button>');
    var $5 = $('<button type="button" data-index="0" data-value="5">5</button>');

    var $6 = $('<button type="button" data-index="1" data-value="0">0</button>');
    var $7 = $('<button type="button" data-index="1" data-value="1">1</button>');
    var $8 = $('<button type="button" data-index="1" data-value="2">2</button>');
    var $9 = $('<button type="button" data-index="1" data-value="3">3</button>');
    var $10 = $('<button type="button" data-index="1" data-value="4">4</button>');
    var $11 = $('<button type="button" data-index="1" data-value="5">5</button>');

    var $12 = $('<button type="button" data-index="2" data-value="0">0</button>');
    var $13 = $('<button type="button" data-index="2" data-value="1">1</button>');
    var $14 = $('<button type="button" data-index="2" data-value="2">2</button>');
    var $15 = $('<button type="button" data-index="2" data-value="3">3</button>');
    var $16 = $('<button type="button" data-index="2" data-value="4">4</button>');
    var $17 = $('<button type="button" data-index="2" data-value="5">5</button>');


    //Add buttons
    $('.form-control').eq(0).after($0,$1,$2,$3,$4,$5);
    $('.form-control').eq(1).after($6,$7,$8,$9,$10,$11);
    $('.form-control').eq(2).after($12,$13,$14,$15,$16,$17);

    //Click event
    $(":button").click(function(){
         var thisIndex = $(this).data('index');
         var thisValue = $(this).data("value");

         $('.form-control').eq(thisIndex).val(thisValue);
    });
});

You also shouldn't give duplicate IDs to elements. I've changed it to use a data attribute. And while it's OK to duplicate classes, using them just to hold data about the element is not really appropriate, so I've changed them to data attributes as well.