Use of select list to control visibility of div

programming web dev
1

Hi,

I have 2 div layers 1 called divStringTest while the other called divNumericTest. The display of these 2 div layers are controlled by a select list called lstDataType. lstDataType contains the following options: string, integer, float and date. Whenever, string is selected, I want to set the display of the divNumericTest to none. Likewise, if the other data type other than string is selected, the display attribute of the divStringTest will be set to none. The following is my code:


function detectDataType()
	{
		var datatype = document.getElementById("lstDataType").options.value;
	
		if ( datatype == 'String' )
		{
			alert(datatype);
			document.getElementById('divStringTest').style.display = "block";
			document.getElementById('divNumericTest').style.display = "none";  
		}
		else
		{
			document.getElementById('divNumericTest').style.display = "block"; 
			document.getElementById('divStringTest').style.display = "none";
		}
			
	}


<!-- html -->
<select name="lstDataType" id="lstDataType" style="width:100px" onchange="detectDataType()">
                <option value="string" selected="selected">String</option>
                <option value="integer">Integer</option>
                <option value="float">Float</option>
                <option value="date">Date</option>                            
</select>

Somehow whenever I select an option, it works for the 1st time but fails subsequently. Any idea why is that so? Thanks in advance.