title: style.display="none" not working
body: <p>I am trying to do a simple if statement in javascript. The script will determine the visibility of a <code>div</code> based on the option selected in a <code>select</code>.</p>
  
  <p>If I select any option, it will act like I selected "Custom" and display the <code>div</code>. But if I then select "This Month" or "Past Month", it will not return to <code>display="none"</code>. The interesting part is that the value of the text boxes, "fromDate" and "toDate", change as if the if statement fired correctly. I can't figure out why they won't return to <code>style.display="none"</code>. </p>
  
  <pre><code>&lt;body&gt;
  &lt;form name="input" action="mlic_DORReport.cfm?dlFile=1" method="post" style="text-align:center;"&gt;
      &lt;table align="center"&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;h1&gt;Electronic NOS File Generator&lt;/h1&gt;
              &lt;hr/&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;table cellpadding="0" cellspacing="0" width="99%"&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      &lt;cfoutput&gt;
                      &lt;input type="hidden" name="pastFromMonth" id="pastFromMonth" value="#pastFromMonthOp#"/&gt;
                      &lt;input type="hidden" name="pastEndMonth" id="pastEndMonth" value="#pastEndMonthOp#"/&gt;
                      &lt;input type="hidden" name="thisFromMonth" id="thisFromMonth" value="#thisFromMonthOp#"/&gt;
                      &lt;input type="hidden" name="thisEndMonth" id="thisEndMonth" value="#thisEndMonthOp#"/&gt;
                      &lt;/cfoutput&gt;
                      &lt;div id="customHeader" style="display:none"&gt;
                          &lt;table align="center"&gt;
                          &lt;tr&gt;
                              &lt;td align="center" style="font-weight:bold;"&gt;
                                   Enter dates in "YYYY-MM-DD HH:MM:SS" format
                              &lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;/table&gt;
                      &lt;/div&gt;
                      &lt;table align="center" cellpadding="1" cellspacing="1" width="65%"&gt;
                      &lt;tr&gt;
                          &lt;td align="center"&gt;
                              &lt;b&gt;Date Range: &lt;/b&gt;
                              &lt;select name="frombox" id="fromBox" onchange="selectDateRange()"&gt;
                                  &lt;option value="Past Month"&gt;Past Month&lt;/option&gt;
                                  &lt;option value="This Month"&gt;This Month&lt;/option&gt;
                                  &lt;option value="Custom"&gt;Custom&lt;/option&gt;
                              &lt;/select&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;
                              &lt;div id="customTxtBox" style="display:none"&gt;
                                  &lt;cfoutput&gt;
                                  &lt;table align="center"&gt;
                                  &lt;tr&gt;
                                      &lt;td align="right"&gt;
                                           From:
                                      &lt;/td&gt;
                                      &lt;td&gt;
                                          &lt;input type="text" name="fromDate" id="fromDate" mask="YYYY-MM-DD" value="#pastFromMonthOp#"/&gt;
                                      &lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;tr&gt;
                                      &lt;td align="right"&gt;
                                           To:
                                      &lt;/td&gt;
                                      &lt;td&gt;
                                          &lt;input type="text" name="toDate" id="toDate" mask="YYYY-MM-DD" value="#pastEndMonthOp#"/&gt;
                                      &lt;/td&gt;
                                  &lt;/tr&gt;
                                  &lt;/table&gt;
                                  &lt;/cfoutput&gt;
                              &lt;/div&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td align="center"&gt;
                              &lt;b&gt;DMV #: &lt;/b&gt;
                              &lt;select name="txtDmvNumber"/&gt;
                                  &lt;option value="D1111"&gt;D1111&lt;/option&gt;
                                  &lt;option value="D2222"&gt;D2222&lt;/option&gt;
                                  &lt;option value="D3333"&gt;D3333&lt;/option&gt;
                                  &lt;option value="D4444"&gt;D4444&lt;/option&gt;
                                  &lt;option value="D5555"&gt;D5555&lt;/option&gt;
                              &lt;/select&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;/table&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                       &amp;nbsp
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td align="center"&gt;
                      &lt;input type="submit" value="Submit"/&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      &lt;div id="customFooter" style="display:none"&gt;
                          &lt;table align="center"&gt;
                          &lt;tr&gt;
                              &lt;td align="center"&gt;
                                   (Note: The HH:MM:SS section of the "From:" date should be
                              &lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td align="center"&gt;
                                   entered 00:00:00 and the "To:" date should be entered 23:59:59)
                              &lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;/table&gt;
                      &lt;/div&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;/table&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>function selectDateRange() {
      var fromboxOption = document.getElementById("fromBox").options[document.getElementById("fromBox").selectedIndex].text;
  
      if (fromboxOption == "Past Month") {
          document.getElementById("fromDate").value = document.getElementById("pastFromMonth").value;
          document.getElementById("toDate").value = document.getElementById("pastEndMonth").value;
  
          document.getElementById("customHeader").style.display = "none";
          document.getElementById("customTxtBox").style.display = "none";
          document.getElementById("customFooter").style.display = "none";
      }
      else if (fromboxOption == "This Month") {
          document.getElementById("fromDate").value = document.getElementById("thisFromMonth").value;
          document.getElementById("toDate").value = document.getElementById("thisEndMonth").value;
  
          document.getElementById("customHeader").style.display = "none";
          document.getElementById("customTxtBox").style.display = "none";
          document.getElementById("customFooter").style.display = "none";
      }
      else(fromboxOption == "Custom") {
          document.getElementById("customHeader").style.display = "inline";
          document.getElementById("customTxtBox").style.display = "inline";
          document.getElementById("customFooter").style.display = "inline";
      }
  }
      &lt;/body&gt;
  </code></pre>