为什么onclick()不生效

ahrisama 2016-03-08 08:51:50



<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Upload information</title>

</head>

<body>

<div id="dcontent">

	<form method="post" enctype="multipart/form-data">

    	<div id="dinfo">

                    	<table id="tMemberInput">

            				<tr>

                            	<td>

                            		<button onclick="myFunction3()">byhand</button>

					<button onclick="myFunction4()">excel</button>

                                    <div id="byhand" style="display:block">//对于 type为text的表单所在div

                                    	<form method="post" enctype="multipart/form-data" >

												<table id="paper">

            										<tr>

														<td>Title</td>

														<td><input type="text" name="session"></td>

													</tr>

               										<tr>

														<td>Author</td>

														<td><input type="text" name="author"></td>

													</tr>

                									<tr>

														<td>E-Mail</td>

														<td><input type="text" name="email"></td>

													</tr>

											</table>

										</form>

									</div>

									<div id="excel" style="display:none">//对于 type为excel的表单所在div

										<form method="post" enctype="multipart/form-data">

											<input type="file" name="excel">

										</form>

                                    </div>

                                </td>

                            </tr>

                            <tr>

                            	<td>

                            		<table id="tMemberExcel">

                                    </table>

                                </td>

                            </tr>

						</table>

        </div>

        <div id="dSubmit">

        	<input type="submit" name="submit" value="SUMBIT">

    	</div>	

	</form>

</div>

<script>

function myFunction3()

{

 var byhand =document.getElementById("byhand");

  byhand.style.display="block";

  var excel =document.getElementById("excel");

  excel.style.display="none";

}

</script>

<script>

function myFunction4()

{

 var byhand =document.getElementById("byhand");

  byhand.style.display="none";

  var excel =document.getElementById("excel");

  excel.style.display="block";

}

</script>

</body>

</html>

页面理想的设计效果是单击一个button，就会出现 type为text的表单
单击另一个button就会出现type为file的表单
设计思路是通过控制两个div的display属性，出现的可能性只能是block/none或none/block
可是实际是单击其中某一个button,可以加载onclick()，但是在很快就恢复成初始页面。
试过用alert()测试，出现提示框有预期的理想效果，单击确定后又恢复了
求解是哪里出现问题了
或者有没有其他设计方案

...全文