javascript - Regarding the problem of function calling, the loop body of the click event cannot loop these four functions, but the loop body can be looped using alert.
扔个三星炸死你
扔个三星炸死你 2017-07-05 10:52:19
0
1
808

It’s okay for the click event to call each function individually, but it won’t work after writing the loop body. The function alone is fine. I always write one test one at a time, and then the click event can be displayed individually, but there is a problem if there is a loop body.
<!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="Click to generate li"/>
</body>
</html>

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

reply all(1)
Ty80

document.body.innerHTML += '<p>' + i + '</p>'; This sentence is caused by the fact that after you re-innerHTML, the previously bound onclick is gone, and everything is actually executed once k It’s just a case of ==0

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template