JavaScript遮罩层运行不正常问题...

请教各位：为什么页面直接执行正常，到遮罩层运行就不正常了呢？被载入页面代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    
    <script type="text/jscript">
        function selectItem(index) {
            switch (index) {
                case (1):
                    {
                        document.getElementById('mct').style.display = "";
                        document.getElementById('dct').style.display = "none";
                        document.getElementById('subject').style.display = "none";
                        break;
                    }
                case (2):
                    {
                        document.getElementById('mct').style.display = "none";
                        document.getElementById('dct').style.display = "";
                        document.getElementById('subject').style.display = "none";
                        break;
                    }
                case (3):
                    {
                        document.getElementById('mct').style.display = "none";
                        document.getElementById('dct').style.display = "none";
                        document.getElementById('subject').style.display = "";
                        break;
                    }
             }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <div id="items"> 
    <input type="button" onclick="selectItem(1)" value="单项选择题" /> &nbsp;&nbsp;
    <input type="button" onclick="selectItem(2)" value="多项选择题"/> &nbsp;&nbsp;
    <input type="button" onclick="selectItem(3)" value="问答题"/> &nbsp;&nbsp;
        <div id="mct" style="background-color:Yellow; display:none; width:500px; height:500px;">单项选择题</div>      
        <div id="dct"style="background-color:blue; display:none; width:500px; height:500px;">多项选择题</div>
        <div id="subject"style="background-color:red; display:none; width:500px; height:500px;">问答题</div>
    </div>
    </div>
    </form>
</body>
</html>载入后，点击按钮不显示层...求教....