js中变量作用域的问题，下面的input放哪里最好，为什么？

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        li{display: inline-block;width: 8px;padding:5px;margin-left:2px;color: #fff; font-size: 8px;text-align: center;}
        ul{display: flex;height: 180px;align-items: flex-end;padding:2px;}
    </style>
</head>
<body>
    <input type="text" id="inputbox"/>
    <button id="leftin">左边入</button>
    <button id="rightin">右边入</button>
    <button id="rightout">右边出</button>
    <button id="leftout">左边出</button>
    <button id="random">随机生成数组</button>
    <button id="sortdata">排序</button>
    <br/>
    <ul id="list"></ul>
    <script type="text/javascript">
        var data=[];
        var container=document.getElementById("list");
            // input=document.getElementById("inputbox").value.trim();

        function rancolor(){
            var colors=["grey"];
            var i=Math.floor(Math.random()*colors.length);
            return colors[i];
        }

        function updata(){
            container.innerHTML="";
            for (var i = 0; i <data.length; i++) {
                var lielement=document.createElement("li");
                lielement.innerText=data[i];
                lielement.style.height=data[i]*1.6+"px";
                lielement.style.backgroundColor=rancolor();
                lielement.setAttribute("id","li-"+i);
                container.appendChild(lielement);
            }
            document.getElementById("inputbox").value="";
        }

        function inputnum(){
            // input=document.getElementById("inputbox").value.trim();
            if (data.length>60) {alert("数据已满！");return 0;}
            if (input=="") {alert("请先输入数字！");return 0;}
            if (input>=100||input<9) {alert("请输入0-99的数字！");return 0;}
            if (isNaN(input)) {alert("请输入正确的数字！");return 0;}
        }

        document.getElementById("leftin").onclick=function(){
            // input=document.getElementById("inputbox").value.trim();
            if (inputnum()==0) {
                return;
            }else{
                data.splice(0,0,input);
                updata();
            }
        }

        document.getElementById("rightin").onclick=function(){
            // input=document.getElementById("inputbox").value.trim();
            if (inputnum()==0) return;
                data.push(input);
                updata();
            
        }

        document.getElementById("leftout").onclick=function(){
            alert(data.splice(0,1));
            updata();
        }

        document.getElementById("rightout").onclick=function(){
            alert(data.pop());
            updata();
        }

        container.addEventListener("click",function(e){
            if (e.target.nodeName!=="LI") {
                return;
            }else{
                var liid=parseInt(e.target.getAttribute("id").substr(3));
                data.splice(liid,1);
                updata();
            }
        })

        document.getElementById("random").onclick=function(){
            data.length=0;
            for (var i = 0; i <50; i++) {
                data[i]=Math.floor(Math.random()*91+9);
            }
            updata();
        }

        document.getElementById("sortdata").onclick=function(){
            var i=0,
                j=1,
                temp;
            len=data.length;
            timer=null;
            timer=setInterval(run,2);
            function run(){
                if (i<len) {
                    if (j<len) {
                        if (data[i]>data[j]) {
                            temp=data[i];
                            data[i]=data[j];
                            data[j]=temp;
                            updata();
                        }else{j++;}
                    }else{i++;j=i+1;}
                }else{clearInterval(timer);return;}
            }
        }
    </script>
</body>
</html>
oldwan
浏览 1609回答 3
3回答

oldwan
问题补充：我尝试在25，47，55，65行分别定义变量input，结果只有在47行定义的时候只需要定义这一次，求指点这是什么原理？
1 0
落叶冰城l
不懂你到底要什么样的效果？
0 0
Walk_
这代码。。。。无敌是多么的寂寞。。PS:@提问者我太菜了，你这代码我看不懂。。
0 0
随时随地看视频慕课网APP