Second time values are not taken correctly from an array randomly in Javascript

Question

I have four boxes I selected 4 items from an array items.

I have placed the randomly selected item inside 4 boxes.

Class box002 can be dragged and dropped to corresponding number in four boxes displayed. then digit in box dissappears.

My problem is that after dropping all four boxes correctly, second time values are not filled correctly, ie, reandomly selected values from array **items** does notmatch with **tempimages** stored for displaying in **box002** for dragging and dropping.

How to solve this? And make second level work?

var items = [{
    label: '1',
    url: 'https://via.placeholder.com/75x75?text=1'
  },
  {
    label: '2',
    url: 'https://via.placeholder.com/75x75?text=2'
  },
  {
    label: '3',
    url: 'https://via.placeholder.com/75x75?text=3'
  },
  {
    label: '4',
    url: 'https://via.placeholder.com/75x75?text=4'
  },
  {
    label: '5',
    url: 'https://via.placeholder.com/75x75?text=5'
  },
  {
    label: '6',
    url: 'https://via.placeholder.com/75x75?text=6'
  },
  {
    label: '7',
    url: 'https://via.placeholder.com/75x75?text=7'
  },
  {
    label: '8',
    url: 'https://via.placeholder.com/75x75?text=8'
  },
  {
    label: '9',
    url: 'https://via.placeholder.com/75x75?text=9'
  },
  {
    label: '10',
    url: 'https://via.placeholder.com/75x75?text=10'
  }
];

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

var backimgcount = 1;
var len = array2.length;

var item;
var displaycounter = 0;




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

function buildImage() {
  document.getElementById('content').style.backgroundImage = 'url(images/' + images[index] + ')';
}

function changeImage() {
  index++;
  if (index >= images.length) index = 0;
  document.getElementById('content').style.backgroundImage = 'url(images/' + images[index] + ')';
}


function rvalue() {


  elements = document.getElementsByClassName("box");

  elements = document.getElementsByClassName("box");

  for (var i = 0; i < elements.length; i++) {
    elements[i].style.backgroundColor = "#ff66ff";
    //elements[i].borderRadius = "2px";
    elements[i].style.border = "2px solid  #e3a89e ";
    //object.style.borderRadius = "1-4 length|% / 1-4 length|%|initial|inherit"

  }


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


  for (var index = 0; index < 4; index++) {
    randomIndex = Math.floor(Math.random() * array2.length)

    item = array2[randomIndex];
    //item = array2.splice(randomIndex, 1);
    
    ptags[index].style.visibility = "visible";
    ptags[index].textContent = item.label;
    boxtags[index].style.backgroundImage = 'url(' + item.url + ')'; 
    tempimages.push({
      data: item,
      index: randomIndex
    });

    ptags[index].dataset.itemIndex = randomIndex;

  }

  var tlen = tempimages.length;


}


function displayAllImages() {
  if (tempimages.length == 0) {

    rvalue();
  }
  //tempimages = tempimages.concat(tempimages.splice(0,2));
  //item = tempimages.splice(0, 1);

  function shuffle(array) {
    var currentIndex = array.length,
      temporaryValue, randomIndex;

    // While there remain elements to shuffle...
    while (0 !== currentIndex) {

      // Pick a remaining element...
      randomIndex = Math.floor(Math.random() * currentIndex);
      currentIndex -= 1;

      // And swap it with the current element.
      temporaryValue = array[currentIndex];
      array[currentIndex] = array[randomIndex];
      array[randomIndex] = temporaryValue;
    }

    return array;
  }


  var arr = tempimages;
  arr = shuffle(arr);

  item = arr.shift();
  image = document.getElementById('slide');
  image.src = item.data.url;
  image.dataset.itemIndex = item.index;


};

$(function() {

  displayAllImages();

});

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

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

function drop(ev) {

  ev.preventDefault();
  var data = ev.dataTransfer.getData("Text");
  var el = document.getElementById(data);


  var x = document.getElementById("slide").dataset.itemIndex;
  var y = ev.target.dataset.itemIndex;



  if (x == y) {
    //el.parentNode.removeChild; 

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

    var pParagraph = ev.currentTarget.firstElementChild;
    //ev.currentTarget.removeChild(pParagraph);
    pParagraph.style.visibility = "hidden";

    item = this.item;
    var arrayvalue = item.dataindex;
    array2.splice(arrayvalue, 1);


    //alert("sucessfull");
    if (tempimages.length == 0) {
      rvalue();
      hiddenimage();
      //changeImage();
      changeImage();
    }
    displayAllImages();
  } else {
    playAudio2();
    alert("WRONG TIME PLACED");
  }

}

body {
  overflow: hidden;
}

.box {
  width: calc(33.3% - 4px);
  display: inline-block;
  border-radius: 5px;
  border: 2px solid #333;
  border: #000 border-color: #e6e600;
  margin: -2px;
  border-radius: 0%;
  background-color: #99ffff;
}

.box {
  height: 15vh;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-size:contain;
}

.box002 {
  position: absolute;
  top: 27.3vh;
  left: 72.98vw;
  cursor: pointer;
}

.box002 img {
  width: 14.0vw;
  height: 23.0vh;
  border-radius: 50%;
}
p{
font: "Courier New", Courier, monospace;
font-size:30px;

 color: rgba(0,0,0,0.6);
text-shadow: 2px 8px 6px rgba(0,0,0,0.2),
                 0px -5px 35px rgba(255,255,255,0.3);

color: #005ce6;
text-align: center;
}

Second time values are not taken correctly from an array randomly in Javascript

Answers (1)

Related Questions