js显示问题，小白求救
我想问的是如何能让下面的表格一开始隐藏，点击submit后显示出来。
还有怎么能把上方输入的数据在表格里显示，而不是显示undefined。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Managerment Panel</title>
<style type="text/css">
.input
{
position:relative;
padding:0;
margin:0;
}
.range
{
margin-right:18%;
font-weight:bolder
}
.range2
{
margin-right:56%;
font-weight:bolder;
}
.border
{
border:2px #006699 solid;
padding:0;
margin:0 25%;
border-radius:9px;
}
.result
{
border:2px solid #CCCCCC;
position:relative;
margin:3% 6%;
padding:3% 1%;
border-radius:9px;
}
.form
{
margin:0;
padding:0 0;
}
.title
{
margin:0;
padding:2% 0;
color:#FFFFFF;
background-color:#006699;
}
.radius
{
border-radius:9px;
}
#result
{
display:none;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js">
var variable = document.getElementById("variable");
var variable_text= variable.value;
var integer = document.getElementById("integer");
var integer_text= integer.value;
var selects = document.getElementById("selects");
var select_text= selects.value;
var chinese = document.getElementById("chinese");
var chinese_text= chinese.value;
var email = document.getElementById("email");
var email_text= email.value;
function showresult()
{
document.getElementById("result").style.display = "block";
}
</script>
</head>
<body>
<div class="border">
<h2 align="center" class="title">Form Validation</h2>
<div class="input">
<form class="form" >
<div class="range" align="right">
<p>Variable：
<input id="variable" class="radius" style="width:60%;" type="text" name="variable" value="Enter a Variable"/>
</p>
<p>Integer：
<input id="integer" class="radius" style="width:60%;" type="text" name="integer" value="Enter an Integer"/>
</p>
</div>
<div class="range2">
<p align="right" >
<label>select：</label>
<select name="select" class="radius" id="selects">
<option value="Select" selected="selected">Select</option>
<option value="Code 0">Code 0</option>
<option value="Code 1">Code 1</option>
<option value="Code 2">Code 2</option>
<option value="Code 3">Code 3</option>
<option value="Code 4">Code 4</option>
<option value="Code 5">Code 5</option>
</select>
</p>
</div>
<div class="range" align="right">
<p>中文：
<input id="chinese" class="radius" style="width:60%;" type="text" name="中文" value="中文输入"/>
</p>
<p>E-mail：
<input id="e-mail" class="radius" style="width:60%;" type="text" name="E-mail" value="Enter a E-mail"/>
</p>
</div>
<p align="center">
<input onclick="showresult()" class="radius" type="submit" value="Submit">
</p>
</form>
</div>
<div class="result">
<table id="result" width="100%" cellpadding="15%" cellspacing="0">
<tr align="center">
<td width="235">Variable</td>
<td width="242"><script type="text/javascript">document.write(variable_text);</script></td>
</tr>
<tr align="center">
<td width="235">Integer</td>
<td width="242"><script type="text/javascript">document.write(integer_text);</script></td>
</tr>
<tr align="center">
<td width="235">Select</td>
<td width="242"><script type="text/javascript">document.write(select_text);</script></td>
</tr>
<tr align="center">
<td width="235">Chinese</td>
<td width="242"><script type="text/javascript">document.write(chinese_text);</script></td>
</tr>
<tr align="center">
<td width="235">E-mail</td>
<td width="242"><script type="text/javascript">document.write(email_text);</script></td>
</tr>
</table>
</div>
</div>
</body>
</html>
<!--要先把表格数值隐藏起来，不显示undefined，赋值后显示-->
<!--要解决的问题还有隐藏表格-->
Rey41回答
-
努力奋斗的小黄人
<td width="242"><script type="text/javascript">document.write(variable_text);</script></td>这种写法很不友好的，我建议先看看基本的js再来练手会比较好，script标签越多页面加载的会越慢，建议先整体有了概念，再实际操作，或者边看基础知识边写代码，不要脱离了基础。加油
随时随地看视频慕课网APP
Html/CSS
Html5
JavaScript