今天上课练习,使用JavaScript去获取文本输入框,密码框,单选框,下拉框多选框的内容,并输出。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body
<div>
学生姓名<input type="text" id="stuname"/><br />
密码:<input type="password" id="password"/><br/>
性别:<input type="radio" name="gender" value="女"/>女
<input type="radio" name="gender" value="男"/>男
<input type="radio" name="gender" value="其他"/>其他<br/>
专业:<select id="major">
<option>--请选择--</option>
<option value="计算机科学与技术">计算机科学与技术</option>
<option value="通信工程">通信工程</option>
</select><br/>
爱好:<input type="checkbox" name="hobby" value="篮球"/>篮球
<input type="checkbox" name="hobby" value="足球"/>足球
<input type="checkbox" name="hobby" value="羽毛球"/>羽毛球 <br/>
<button onclick="showinfo();">显示信息</button>
</div>
<script type="text/javascript">
function showinfo(){
var stuname=document.getElementById("stuname").value;
var password=document.getElementById("password").value;
var genderinput=document.getElementsByName("gender");
for(var i=0;i<genderinput.length;i++){
//genderinput[i].checker 表示当前组件是否被选中
if(genderinput[i].checked){
gender=genderinput[i].value;
break;
}
}
var major=document.getElementById("major").value;
var hobbyinput=document.getElementsByName("hobby");
var hobby="";
for(var i=0;i<hobbyinput.length;i++){
if(hobbyinput[i].checked){
if(hobby!=""){
hobby=hobby+","+hobbyinput[i].value;
}else{
hobby=hobbyinput[i].value;
}
}
}
//document.write(" 姓名:" + stuname + "<br /> 密码:" + password + "<br /> 性别:" + gender + "<br /> 专业:" + major + "<br /> 爱好:" + hobby );
document.write("姓名:"+stuname +"<br/>密码:"+password +"<br/>性别:"+gender +"<br/>专业:"+major +"<br/>爱好:"+hobby)
//拼接输出中间全部要加+号
//var stuname=document.getElementById("stuname");
//var stuname=stuname.value;
}
</script>
</body>
</html>
这段代码其中我找错找了挺久,一定要记住组合输出的时候要在每个模块之间加上+,否则会输出有问题!