style.display=“none” not working
Question
I am trying to do a simple if statement in javascript. The script will determine the visibility of a div based on the option selected in a select .
If I select any option, it will act like I selected "Custom" and display the div . But if I then select "This Month" or "Past Month", it will not return to display="none" . 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 style.display="none" .
<body>
<form name="input" action="mlic_DORReport.cfm?dlFile=1" method="post" style="text-align:center;">
<table align="center">
<tr>
<td>
<h1>Electronic NOS File Generator</h1>
<hr/>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" width="99%">
<tr>
<td>
<cfoutput>
<input type="hidden" name="pastFromMonth" id="pastFromMonth" value="#pastFromMonthOp#"/>
<input type="hidden" name="pastEndMonth" id="pastEndMonth" value="#pastEndMonthOp#"/>
<input type="hidden" name="thisFromMonth" id="thisFromMonth" value="#thisFromMonthOp#"/>
<input type="hidden" name="thisEndMonth" id="thisEndMonth" value="#thisEndMonthOp#"/>
</cfoutput>
<div id="customHeader" style="display:none">
<table align="center">
<tr>
<td align="center" style="font-weight:bold;">
Enter dates in "YYYY-MM-DD HH:MM:SS" format
</td>
</tr>
</table>
</div>
<table align="center" cellpadding="1" cellspacing="1" width="65%">
<tr>
<td align="center">
<b>Date Range: </b>
<select name="frombox" id="fromBox" onchange="selectDateRange()">
<option value="Past Month">Past Month</option>
<option value="This Month">This Month</option>
<option value="Custom">Custom</option>
</select>
</td>
</tr>
<tr>
<td>
<div id="customTxtBox" style="display:none">
<cfoutput>
<table align="center">
<tr>
<td align="right">
From:
</td>
<td>
<input type="text" name="fromDate" id="fromDate" mask="YYYY-MM-DD" value="#pastFromMonthOp#"/>
</td>
</tr>
<tr>
<td align="right">
To:
</td>
<td>
<input type="text" name="toDate" id="toDate" mask="YYYY-MM-DD" value="#pastEndMonthOp#"/>
</td>
</tr>
</table>
</cfoutput>
</div>
</td>
</tr>
<tr>
<td align="center">
<b>DMV #: </b>
<select name="txtDmvNumber"/>
<option value="D1111">D1111</option>
<option value="D2222">D2222</option>
<option value="D3333">D3333</option>
<option value="D4444">D4444</option>
<option value="D5555">D5555</option>
</select>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
 
</td>
</tr>
<tr>
<td align="center">
<input type="submit" value="Submit"/>
</td>
</tr>
<tr>
<td>
<div id="customFooter" style="display:none">
<table align="center">
<tr>
<td align="center">
(Note: The HH:MM:SS section of the "From:" date should be
</td>
</tr>
<tr>
<td align="center">
entered 00:00:00 and the "To:" date should be entered 23:59:59)
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
JS
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";
}
}
</body>
1 answers
solution1
3 ACCPTED 2013-07-03 21:24:27
On the last condition of your if statement you included an expression without an 'if'. Change it from
else (fromboxOption == "Custom")
to
else if (fromboxOption == "Custom")
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
"style.display = 'flex/none'" not working
style.display == “none” Not Working Properly
Javascript: style.display=“none” not working whereas style.display=“visible” works
Style.Display = "None" Not working in Google Apps Script HTML Service
document.getElementById("").style.display='none'; is not working
style.display = "none" is not working in IE but works in Other browser
“document.getElementById(div).style.display = none” not working
Why style.display = “none”; is not working on responsive navbar
CSS style.display not working
javascript style.display not working
Related Tags