Question

I have two grids, they both display buttons. One grid displays numbers, true or false and yes or no, and the other grid displays letters, true, false, yes and no.

The second grid is not displayed in the code (used css to not display second grid buttons (.answerBtns)).

Now I have included this in my code:

var clickedNumber = 10;
$('.answerBtns').each(function (index) {
    if (index < clickedNumber) {
        $(this).show();
    }
});

Now what this does is no matter how which button I select in the first grid, it will always display 10 buttons. So what I need is clickNumber to be in a loop so it loops through the buttons, so if the user selects button “1” in first grid (the grid which you have to open using (Open Grid) link, then it should display the first button which is “A” in second grid, if user selects button “2” in first grid, then it should display the first two buttons “A” and “B” in second grid, if “3” then display “A”, “B” and “C” and so on.

But also if user selects “True or False” button in first grid, it should display only “true” and “false” buttons in second grid and if user selects “yes or no” button in first grid, it should display “Yes” and “No” buttons only in second grid.

Does anyone know how to do this?

Thank you

Code is in jsfiddle, click here

Answer 1

If you add the following to the end of your buttonclick() function it will show or hide the appropriate number of buttons, as you can see in this updated jsfiddle.

$('.answerBtns').each(function (index) {
   if (index < button.value)
      $(this).show();
   else
      $(this).hide();
});

Note that that is basically the same as the snippet from your question except using the value from the clicked button instead of a hardcoded 10.

But more generally, if you’re using jQuery then use jQuery. That is, don’t put inline onclick handlers in every one of your buttons. They all just say onclick="buttonclick(this);", and they all have the same class, so you should remove those inline handlers from your HTML and set them up using jQuery.

So you could replace your buttonclick function with something like this:

$(".gridBtns").click(function() {
   // what you need from your "buttonclick(button)" function should go here
   // except instead of the "button" parameter you can just use "this",
   // e.g., this.value

   var clickedNumber = this.value;

   $('.answerBtns').each(function (index) {
      if (index < clickedNumber)
         $(this).show();
      else
         $(this).hide();
   });

});

I haven’t got time to do the “yes or no” part for you, but perhaps you can figure it out from the above? Within the click handler you can test if (this.value==="yes or no") and so forth.