使用JavaScript从数组更改类的图像失败

Question

我有一个包含4张图像的图像数组，我具有构建图像和更改图像功能。我有容器，我想添加图像广告

我有课盒box2。 box2可以拖放到任意3个框中。

我尝试从 drop（）内部调用更改图片功能。

我的目的是在tempimages == 0时重新加载数组值时更改图像

如何实现？如何更正代码？

var items = [{
    label: '1:40',
    url: 'https://via.placeholder.com/75x75?text=1'
  },
  {
    label: '2:20',
    url: 'https://via.placeholder.com/75x75?text=2'
  },
  {
    label: '3:50',
    url: 'https://via.placeholder.com/75x75?text=3'
  },
  {
    label: '4:45',
    url: 'https://via.placeholder.com/75x75?text=4'
  },
  {
    label: '5:35',
    url: 'https://via.placeholder.com/75x75?text=5'
  },
  {
    label: '6:10',
    url: 'https://via.placeholder.com/75x75?text=6'
  },
  {
    label: '7:15',
    url: 'https://via.placeholder.com/75x75?text=7'
  },
  {
    label: '8:10',
    url: 'https://via.placeholder.com/75x75?text=8'
  },
  {
    label: '9:30',
    url: 'https://via.placeholder.com/75x75?text=9'
  },
  {
    label: '10:40',
    url: 'https://via.placeholder.com/75x75?text=10'
  },
  {
    label: '11:20',
    url: 'https://via.placeholder.com/75x75?text=11'
  },
  {
    label: '12:50',
    url: 'https://via.placeholder.com/75x75?text=12'
  },
  {
    label: '01:45',
    url: 'https://via.placeholder.com/75x75?text=13'
  },
  {
    label: '02:25',
    url: 'https://via.placeholder.com/75x75?text=14'
  },
  {
    label: '03:40',
    url: 'https://via.placeholder.com/75x75?text=15'
  }
]

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


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

var images = [ 'https://picsum.photos/200/300/?random', 'https://picsum.photos/200/300/?random','https://picsum.photos/200/300/?random','https://picsum.photos/200/300/?random' ];
    var index = 0;

    function buildImage() {
      var img = document.createElement('img')
      img.src = images[index];
      document.getElementById('content').appendChild(img);
    }

    function changeImage(){
      var img = document.getElementById('content').getElementsByTagName('img')[0]
      index++;
      index = index % 4; // This is for if this is the last image then goto first image I have 4 images so I've given 4 change accordingly 
      img.src = images[index];
    }
    

function rvalue() {

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

  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;



}


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);


    displayAllImages();

    alert("sucessfull");
    if (tempimages.length == 0) {
      alert("NO more images");
      rvalue();
      changeImage();

    }

  } else {
    alert("WRONG PLACE");
  }

}

.box {
  width: 50px;
  height: 50px;
  display: inline-block;
  border: 2px solid #333;
  border-color: #e6e600;
  margin: -2px;
  background-color: #66cc99;
  vertical-align: middle;
}

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

.containerr {
  margin-top: 5%;
  margin-right: 20%;
  margin-left: 0%;
  border: px solid #FF3399;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="container" id="content">

  <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 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>