Change your code to this to properly declare the local variable fs once. Then, you can reliably test at the end of your code to see if it's been set or not. Your previous code might work due to variable hoisting, but it isn't the recommended way of coding. A variable's scope is the function it's declared in.
function toggleDeliveryOption(source) {
var fs = null;
if(source.toLowerCase() === "maildeliveryoption")
{
fs = document.getElementById("mailDeliveryOptionFS");
}
else if(source.toLowerCase() === "faxdeliveryoption")
{
fs = document.getElementById("faxdeliveryoptionFS");
}
else if(source.toLowerCase() === "emaildeliveryoption")
{
fs = document.getElementById("emaildeliveryoptionFS");
}
if (fs)
{
if (fs.style.display == "none") {
fs.style.display = "block";
} else {
fs.style.display = "none";
}
}
}
The other potential gotcha here is that fs.style.display may not be previously set as reading the style variable this way only returns explicit inline styles in the HTML (it does not return things set via CSS). If you want to know the actual state of the display setting, you have to use computed style which will include CSS settings. Getting the computed style is different in windows so it takes a few more lines of code to do that. This is one of the reasons I use a framework like YUI or jQuery because it takes care of all this cross-browser mess for me.
Incidentally, you could simplify the code a lot like this:
function toggleDeliveryOption(source) {
var fs = document.getElementById(source);
if (fs) {
if (fs.style.display == "none") {
fs.style.display = "block";
} else {
fs.style.display = "none";
}
}
}
To make this simpler version work, just pass the id of the option to toggle:
toggleDeliveryOption("mailDeliveryOptionFS");
If you want the actual display state including CSS settings, then you would need to use this:
// add IE compatibility function for getComputedStyle
if (!window.getComputedStyle) {
window.getComputedStyle = function(el, pseudo) {
this.el = el;
this.getPropertyValue = function(prop) {
var re = /(\-([a-z]){1})/g;
if (prop == 'float') prop = 'styleFloat';
if (re.test(prop)) {
prop = prop.replace(re, function () {
return arguments[2].toUpperCase();
});
}
return el.currentStyle[prop] ? el.currentStyle[prop] : null;
}
return this;
}
}
function toggleDeliveryOption(source) {
var fs = document.getElementById(source);
if (fs) {
var style = getComputedStyle(fs, null);
if (style.display == "none") {
fs.style.display = "block";
} else {
fs.style.display = "none";
}
}
}
mailDeliveryOptionFSis camel cased where the other two are not.