Javascript - buttons select and unselect issue

I have a dropdown menu and some buttons below in my HTML:

<p>
    <select name="numberDrop" id="numberDropId" onClick="getButtons()">
    <option value=""></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    </select>
    </p>

    <p>
    <input class="answerBtns" name="answerA" type="button" value="A" />
    <input class="answerBtns" name="answerB" type="button" value="B" />
    <input class="answerBtns" name="answerC" type="button" value="C" />
    <input class="answerBtns" name="answerD" type="button" value="D" />
    <input class="answerBtns" name="answerE" type="button" value="E" />
    </p>

What I want to know is that how is it suppose to be coded so that the user can only select the same amount of buttons as the number from the drop down menu?

For example if the user selects the number 3 from the dropdown menu, then if the user clicks on a button, it will highlight the button in a color (lets say green) but the user can only have three buttons selected. If an additional button is clicked then that button would not be selected. The additional button can only be selected if the user unselects a selected button and then selects the button he wishes. This means that only 3 buttons can be selected at maximum. Also only 3 buttons minimum can be selected, if more or less buttons are selected than the number 3 then it should come up with an alert.

Is this suppose to be done in Javascript or Jquery and how can I use css to change the color of the ubttons to green if selected or back to grey if unselected?

Thank You

  1. JQUERY = JAVASCRIPT :bouncy3: (tattoo that on your forehead if you need to)

jquery is simply a bunch of javascript functions pre-written for you by someone else. So what you want to do can all be done with Javascript. There is nothing you can do with jquery that cannot be done with plain javascript.

  1. You use javascript to assign an event handler to the <select>. The event handler function then changes button styles and does whatever other processing you want to do. In a nutshell, you use javascript to manipulate the html elements and their properties via their object references in the DOM.

Post the javascript you have so far and we can try to help you get it working.

For starters you can fix this bug:

onClick="getButtons()"

should be


onchange="getButtons()"