<!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>