简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - 關於函數呼叫的問題，點擊事件的循環體不能循環這四個函數，但是用alert測試​​過循環體能循環。
扔个三星炸死你
扔个三星炸死你 2017-07-05 10:52:19
0
1
764

點選事件單獨呼叫每個函數都沒問題，但是寫上循環體之後就不行了。函數單獨來說沒問題，我都是寫一個測試一個，然後點擊事件單獨的函數也能顯示但是有循環體就有問題了。
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>Title</title>
<style>
    *{padding:0;margin: 0;}
    #btn{position: absolute;top:0;left:300px;}
    p{width: 50px;height:50px;position: absolute;top:0;left:0;background:green;font-size: 30px; text-align:center;color:red;line-height: 50px;cursor: pointer;}
</style>
<script>
    window.onload=function () {
        var btn = document.getElementById("btn");
        var op = document.getElementsByTagName("p");
        function first() {
            {
               // btn.style.display = "none";
                for (var i = 0; i < 5; i++) {
                    document.body.innerHTML += '<p>' + i + '</p>';
                }
                for (i = 0; i < op.length; i++) {
                    //op[i].index = i;
                    if (i > op.length / 2) {
                        op[i].style.left = i * 60 + "px";
                        op[i].style.top = (i - parseInt(op.length / 2)) * 60 + "px";
                    }
                    else {
                       // alert(i);
                        op[i].style.top = (parseInt(op.length / 2) - i) * 60 + "px";
                        op[i].style.left = i * 60 + "px";
                    }
                }
            }
        }
        function second() {
           // btn.style.display="none";
            for (var i = 0; i < 5; i++) {
                 document.box2.innerHTML += '<p id="box">' + i + '</p>';
            }
            for ( i = 0; i < op.length; i++) {
                //op[i].index = i;
                if(i>op.length/2){
                    op[i].style.left = (op.length-i -1)* 60 + "px";
                    op[i].style.top=i*60+"px";
                }
                else {
                    // alert( i);
                    op[i].style.top =  i* 60 + "px";
                    op[i].style.left = i * 60 + "px";
                }
            }
        }
        function three() {
                //btn.style.display = "none";
                for (var i = 0; i < 5; i++) {
                    document.body.innerHTML += '<p>' + i + '</p>';
                }
                for (i = 0; i < op.length; i++) {
                    //op[i].index = i;
                    if (i > op.length / 2) {
                        op[i].style.left = (i - parseInt(op.length / 2)) * 60 + "px";
                        op[i].style.top = i * 60 + "px";
                    }
                    else {
                        // alert( i);
                        op[i].style.top = i * 60 + "px";
                        op[i].style.left = ( parseInt(op.length / 2) - i) * 60 + "px";
                    }
                }
            }
        function  four()  {
            //btn.style.display="none";
            for (var i = 0; i < 5; i++) {
                document.body.innerHTML += '<p>' + i +'</p>';
            }
            for ( i = 0; i < op.length; i++) {
                op[i].index = i;
                if(i>op.length/2){
                    op[i].style.left = i * 60 + "px";
                    op[i].style.top=(op.length-i-1)*60+"px";
                }
                else {
                    op[i].style.top = i * 60 + "px";
                    op[i].style.left = i * 60 + "px";
                }
            }
        }
        var k=0;
        btn.onclick = function () {
            //if(k==0){alert(1)}
            if(k==0){first()}
            if(k==1){second()}
            if(k==2){three()}
            if(k==3){four()}
            k++;
          // first();
           //second();
           //three();
           //four();

        }
    };
</script>

</head>
<body>
<input id="btn" type="button" value="點選產生li"/>
</body>
</html>

扔个三星炸死你
扔个三星炸死你

全部回覆(1)
Ty80
Ty802017-07-05 10:54:19 1樓

document.body.innerHTML += '

' + i + '

';這一句導致的,因為你重新innerHTML之後,之前綁定的onclick沒有了,所有其實就執行一次k== 0的情況而已
點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！