タスク4:基礎JavaScript練習(一)

タスクの説明

図のように、キューをシミュレートします.キューの各要素は数字で、初期キューにはinput入力ボックスが空で、4つの操作ボタンが「左側に入る」をクリックして、inputに入力された数字を左側からキューに挿入します.「右側入」をクリックし、inputに入力した数字を右側からキューに挿入します.「左から出る」をクリックし、キューの左側の最初の要素を読み取り、削除し、要素の数値をポップアップします.「右側出」をクリックし、キューの最初の要素を読み取り、削除し、要素の数値をポップアップします.
キュー内の任意の要素をクリックすると、その要素はキューから削除されます.

    
    
    


    

        
        

                
                
                
                
        
        

            
        
    
    
        var data=[5,2,1];
        var list=document.getElementById("list");
        var int=document.getElementById("input");
        var btn=document.querySelectorAll('.btn button');
        btn.forEach(function(el,index){
            el.addEventListener('click',function(){
                var val=int.value;
                if(index==0){
                    data.unshift(val);
                }
                if(index==1){
                    data.push(val);
                }
                if(index==2){
                    data.shift();
                }
                if(index==3){
                    data.pop();
                }
                render();
            })
        })
        function render(){
            var html='';
            data.forEach(function(el){
                html+='<li>'+el+'</li>'
            })
            list.innerHTML=html;
            var lis=list.querySelectorAll('li');
            lis.forEach(function(ev,index){
                ev.addEventListener('click',function(){
                    list.removeChild(ev);
                    data.splice(index,1);
                })
            })
        }
        render();
    

主な考察知識点:配列の追加とdomノードの削除