I have a grid of buttons where user opens up the gird by clicking on the (Open Grid) link and then clicking on a button in that grid. What I want to do is that if user clicks on the "True or False" button, then it should output buttons "True" and "False" underneath the "Number of Answers" textbox. But it is not displaying anything. What am I doing wrong?

The code is here:

$(".gridBtns").click(function() {

   var clickedNumber = this.value;

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

   if (document.getElementsByClassName("gridBtns").value == "True or False")
   {
       document.getElementId("answerTrue").style.display = "block";
   }

});

Full code is in jsfiddle, click here

I have a grid of buttons where user opens up the gird by clicking on the (Open Grid) link and then clicking on a button in that grid. What I want to do is that if user clicks on the "True or False" button, then it should output buttons "True" and "False" underneath the "Number of Answers" textbox. But it is not displaying anything. What am I doing wrong?

The code is here:

$(".gridBtns").click(function() {

   var clickedNumber = this.value;

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

   if (document.getElementsByClassName("gridBtns").value == "True or False")
   {
       document.getElementId("answerTrue").style.display = "block";
   }

});

Full code is in jsfiddle, click here

• javascript
• jquery
• dom

• 1 FWIW getElementsByClassName is not available in IE8 and below... but why don't you use jQuery in that case? – Felix Kling Commented Dec 11, 2011 at 17:22
• you are paring in different statement in different place for same element 1) $(".gridBtns").click 2) document.getElementsByClassName("gridBtns").value i am not sure what is happening – manny Commented Dec 11, 2011 at 17:32
• Interestingly, querySelector('.classname') does work in IE8, so is a better choice than getElementsByClassName in that regard. – Niet the Dark Absol Commented Dec 11, 2011 at 17:41
• Thanks everybody attempting to answer my question, greatly appreciate it. I have found an answer so this question is solved – BruceyBandit Commented Dec 11, 2011 at 17:59

4 Answers 4

Instead of this:

if (document.getElementsByClassName("gridBtns").value == "True or False")
{
    document.getElementId("answerTrue").style.display = "block";
}

Try this:

if (this.id=='btnTrueorFalse') {
    $('#answerTrue').show();
    $('#answerFalse').show();
} 

Besides the 1/many error already mentioned in another post, it looks like the original is just looking for the wrong property in the wrong place.

getElementsByClassName returns a NodeList (which acts like an array), not a single Element.

The jQuery code to equal your code above would be

if($('.gridBtns').val() == 'True or False'){
  $('#answerTrue').show(); //you may also use .css() for it, but show() has the same    result
}

I've been seeing this code here for a while now:

If you use jQuery, use it. Doing document.getElementById(..) suddenly is just nonsensical. Just use jQuery selectors everywhere, and methods (f.i. .addClass(..) instead of .className = ..). jQuery is the way you access your DOM, using a mix is just confusing.

Also, I notice most of your problems with this Ui stem from the fact that:

• It is a bad UI (no offense, just think about it)
• You use the UI for storing state. Don't do that. UI should be dependent on state, not the other way around.