代码改变世界

innerhtml的使用

2018-04-16 22:26  yelena  阅读(330)  评论(0)    收藏  举报 
<!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>