<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
background-color: lightcyan;
width: 1000px;
box-shadow: 5px 5px 1px lightgray;
margin: auto;
padding-bottom: 20px;
}
.one{
border: 1px solid gainsboro;
width: 700px;
padding: 5px;
}
.two{
border: 1px solid gainsboro;
width: 700px;
padding: 5px;
}
</style>
</head>
<body>
<div id="">
innerhtml的使用
<div class="one">
<input type="text" name="" id="tj" value="这里输入文本" />
<input type="submit" name="" id="" value="提交" / onclick="aa()">
</div>
<br />
<div class="two">
</div>
</div>
<br />
<br />
<br />
<div id="">
innerhtml的使用、字符串、判断的基本使用
<div class="one">
<input type="text" name="" id="tj1" value="这里输入文本" /> +
<input type="text" name="" id="tj2" value="这里输入文本" />
<input type="submit" name="" id="" value="提交" / onclick="bb()">
</div>
<br />
<div class="two">
</div>
</div>
<br />
<br />
<br />
<div id="">
innerhtml的使用、字符串、判断的基本使用
<div class="one">
<button onclick="cc(0)">提交一</button>
<button onclick="cc(1)">提交二</button>
<button onclick="cc(2)">提交三</button>
<button onclick="cc(3)">提交四</button>
<button name="quanbu" onclick="cc()">全部弹出提取</button>
</div>
<br />
<div class="two">
</div>
</div>
</body>
</html>
<script type="text/javascript">
function aa(){
var tjxs = document.getElementsByClassName("two")[0];
var tj = document.getElementById("tj");
tjxs.innerHTML = "提交后在这里显示："+tj.value;
}
function bb(){
var tjxs = document.getElementsByClassName("two")[1];
var tj = document.getElementById("tj");
tjxs.innerHTML = "提交后在这里显示："+tj1.value+tj2.value;
}
var attr = ["这是第一句","这是第二句","这是第三局","这是第四句"]
function cc(a){
var tjxs = document.getElementsByClassName("two")[2];
if(a==0){
tjxs.innerHTML = "提取后在这里显示："+ attr[a];
}
else if(a==1){
tjxs.innerHTML = "提取后在这里显示："+ attr[a];
}
else if(a==2){
tjxs.innerHTML = "提交后在这里显示："+ attr[a];
}
else if(a==3){
tjxs.innerHTML = "提交后在这里显示："+ attr[a];
}
else{
for(i=0;i<=3;i++){
alert(attr[i]);
}
}
}
</script>
