Question

I have a slight problem with my dropdown function. What is suppose to happen is that is if (optionDrop[0].value == “”) (this is “Please Select” option in dropdown menu which I put a comment in the function so you know where the problem is), then do not display the buttons A, B or C. This works when the page is opened as the pre-select value is “”, but when I click on the dropdown menu OR select the value “” again, then it displays buttons B and C and only does not display A. Buttons A, B and C are supposed to not be displayed. Why is it acting like this?

Below is function (I put a comment where the problem is)

        function getDropDown() {
var optionDrop = document.getElementsByName("optionDrop");
var na = document.getElementById("na");
var numberDrop = document.getElementsByName("numberDrop");
var answer = document.getElementsByName("answer");

if (optionDrop[0].value == "abc" || optionDrop[0].value == "abcd" || optionDrop[0].value == "abcde"){
numberDrop[0].style.display = "block";
na.style.display = "none";

                }

    // THIS IS THE PROBLEM

else if (optionDrop[0].value == "trueorfalse" || optionDrop[0].value == "yesorno"){         
numberDrop[0].style.display = "none";
na.style.display = "block";

}else if (optionDrop[0].value == ""){           
numberDrop[0].style.display = "none";
na.style.display = "none";
answer[0].style.display = "none";
answer[1].style.display = "none";
answer[2].style.display = "none";           
                            }         


if (optionDrop[0].value == "abc" && numberDrop[0].value == "1")
answer[0].style.display = "block";
answer[1].style.display = "block";
answer[2].style.display = "block";
                        }

Below is html of dropdown menus and buttons:

<form id="enter" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" >
<table id="middleDetails" border="1">
<tr>
      <th colspan="2">
        Option and Answer
    </th>
</tr>
<tr>
    <td>Option Type:</td> 
    <td>
        <select name="optionDrop" onClick="getDropDown()">
<option value="">Please Select</option>
<option value="abc">ABC</option>
<option value="abcd">ABCD</option>
<option value="abcde">ABCDE</option>
<option value="trueorfalse">True or False</option>
<option value="yesorno">Yes or No</option>
</select>
    </td>
<tr>
<td colspan="2"></td>
<td>Number of Answers:</td>
<td>
<span id="na">N/A</span>
<select name="numberDrop" id="numberDropId" onClick="getDropDown()>
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
</tr>
<tr>
<td colspan="2"></td>
<td>Answer</td>
<td>
<input class="answerBtns" name="answer" type="button" value="A" />
<input class="answerBtns" name="answer" type="button" value="B" />
<input class="answerBtns" name="answer" type="button" value="C" />
<input class="answerBtns" name="answer" type="button" value="D" />
<input class="answerBtns" name="answer" type="button" value="E" />
<input class="answerBtns" name="answer" type="button" value="True" />
<input class="answerBtns" name="answer" type="button" value="False" />
<input class="answerBtns" name="answer" type="button" value="Yes" />
<input class="answerBtns" name="answer" type="button" value="No" />
</td>
</tr>
</table>
</form> 

Below is CSS;

.answerBtns{
    display:none;
    }

Answer 1

You are missing a set of braces for the if statement at the end of your javascript function:

if (optionDrop[0].value == "abc" && numberDrop[0].value == "1")
answer[0].style.display = "block";   // conditionally executed
answer[1].style.display = "block";   // always executed
answer[2].style.display = "block";   // always executed

Therefore, the last two statements are always executed and the B and C buttons are always shown. You want to have something like this instead:

if (optionDrop[0].value == "abc" && numberDrop[0].value == "1")
{
  answer[0].style.display = "block";   // conditionally executed
  answer[1].style.display = "block";   // conditionally executed
  answer[2].style.display = "block";   // conditionally executed
}