我怎样才能确定为什么这段代码没有输出？ [关闭]

Question

我正在学习 JavaScript 动画。我写了这段代码，但它不起作用。我怎样才能找到问题？单击按钮时，我想移动蓝色方块：

    <html>

    <!-- css code -->
    <style>
        body{background-color:black;}
        
        #a{
        width:100;
        height:100;
        position:relative;
        background-color:yellow;
        }
        
        #b{
        width:50px;
        height:50px;
        position:absolute;
        background-color:blue;
        }
        
        #btn{
        background-color:orange;
        border-radius:4px;
        color:white;
        }
    </style>
    <!-- css ends here -->





    <!-- html code-->
    <body>
        <button type="submit" onclick="rn" id="btn">click me</button>
        <div id="a">
            <div id="b"></div>
        </div>    
    </body>
    <!-- html ends here -->





    <!-- script starts here -->
    <script>
        function rn(){
        var box = document.getElementById("b");
        var pos = 0;
        var r = setInterval(move, 5);
        
        function move(){
        if (pos == 150){clearInterval(r)
        }//if ends
        
        else{
            pos +=1;
            box.style.left = pos+"px"
        }//else ends
        }//child function ends
        }//parent function ends
    </script>
    <!-- script ends here -->


    </html>

Answer 1

只需在点击中将 rn 更改为 rn()。它会起作用的。

rn 是函数，你想在点击时执行。