在javascript中第二次随机选择值失败

Question

我已经实现了两个div类 box 和box2，box2可以拖到三个 div类框中的任何一个。类别框包含随机个从数组项中选择的值，并且类别框2包含其显示的对应图像，因此可以将其拖动到任何类别框。

我已经完成以下

我已将相应的图像存储在 tempimages 数组中，并尝试检查drop（）函数中的tempimages == 0，以便一旦值超过计数器，就从数组项中获取值并填充类框。

我无法执行上述循环操作

如何用值重新填充该框一次拖放即可清除所有三个框中的值。

我该如何纠正？

var items = [  
      { label: '1:40', url: '1.png'  },
      { label: '2:20', url: '2.png'  },
      { label: '3:50', url: '3.png'  },
      { label: '4:45', url: '4.png'  },
      { label: '5:35', url: '5.png'  },
      { label: '6:10', url: '6.png'  },
      { label: '7:15', url: '7.png'  },
      { label: '8:10', url: '8.png'  },
      { label: '9:30', url: '9.png'  },
	    { label: '10:40', url:'10.png' },
      { label: '11:20', url:'11.png' }
	  ]

var tempimages = [];
var array2=[];
array2 = items.slice(); 


var len=array2.length;
console.log(len);
var item;



function rvalue() {
	
ptags = document.querySelectorAll('[name="values"]');


console.log(items);
console.log(array2);  

console.log(ptags);
console.log(ptags)


for (var index = 0; index < 3; index++) 
     {
      randomIndex = Math.floor(Math.random() * array2.length),
      
      item = array2[randomIndex];
      ptags[index].textContent = item.label;
      tempimages.push({data:item, index: randomIndex});
	  
	  ptags[index].dataset.itemIndex = randomIndex;
    }
	var tlen=tempimages.length;
    console.log(tempimages[0])
  	console.log(tempimages);
	console.log(tlen);


}
	

function displayAllImages() 
{
  if (tempimages.length == 0) 
  {
	rvalue();
	//return;
	
  }
	item = tempimages.shift(); 
    image = document.getElementById('slide');
    image.src = item.data.url;
    image.dataset.itemIndex = item.index;
	
	
   
};

$(function() {
	 
  rvalue();
  displayAllImages(); 
  
});	

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev) {

  ev.preventDefault();
  console.log(ev.srcElement);

 var data = ev.dataTransfer.getData("Text");
 var el = document.getElementById(data);
 //alert(data);
 //alert(el);
	
 var x=document.getElementById("slide").dataset.itemIndex;
 var y = ev.target.dataset.itemIndex;

// alert("x=>" + x + " y=>" + y);
  
 if(x==y)
  {
  el.parentNode.removeChild; 

  
  ev.currentTarget.style.backgroundColor = 'initial'; 

  var pParagraph = ev.currentTarget.firstElementChild;
  ev.currentTarget.removeChild(pParagraph);
  
  item=this.item;
  var arrayvalue=item.dataindex;
  array2.splice(arrayvalue,1);
  
 
  console.log(array2); 
  displayAllImages();
  
  console.log(tempimages.length);
  alert("sucessfull");
  if (tempimages.length == 0) 
  {
	  alert("NO more images");
	rvalue();
	
  }
  
  }
  else{
  alert("WRONG PLACE");
  }

}

.box {
    width: 35px;
	height:35px;
    display:inline-block;
    border-radius:5px;
    border:2px solid #333;
	border-color: #e6e600;
	margin:-2px;
	border-radius: 10%;
    background-color:   #bfff80;
	vertical-align: middle;

}
.box2 {
            float: left;
            width: 30px;
            height: 30px;
            float: left;
			margin-top:3%;
			padding-top:2%;
			border:1px solid #000066;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <div id="container">
            
                <div class="box"  ondrop="drop(event)" ondragover="allowDrop(event)" id="10"><p name="values"></p></div>
                <div class="box"  ondrop="drop(event)" ondragover="allowDrop(event)" id="11"><p name="values"></p></div>
                <div class="box"  ondrop="drop(event)" ondragover="allowDrop(event)" id="12"><p name="values"></p></div>
            </div>
         
</div>
    
<div class="box2" draggable="true" ondragstart="drag(event)" id="2">
	<img src=""  draggable="true" id="slide" style="width:30px; height:30px; border-radius: 50%;" border="rounded"/>
</div>