Reloading values into array happens one place before than last place in javascript

Question

I have a class box2, and box, box contains value randomly selected from array2 which is a duplicate of array items

When the dragged element url matches with dropped element label the background color disappears.

I have given condition if tempimages==0 the random selection happens once again. ie, when drop is at the last element.

My problem is when drop reaches the second-last element, random selection and refilling of elements in class box happens

I want this to happen on last box.

how to achieve and correct it?

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;



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

    }

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

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

NullPointer · Accepted Answer

This is because tempimages.shift(); remove the 1st element in displayAllImages(); before you check length in code .

Move displayAllImages(); after if(tempimages.length == 0) {...} will work correctly.

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

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;



function rvalue() {
    //reset background color of box div`s
    elements = document.getElementsByClassName("box");
    for (var i = 0; i < elements.length; i++) {
        elements[i].style.backgroundColor="#66cc99";
    }
  
  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;
    //alert(ptags[index]);
    ptags[index].style.visibility = "visible";
    tempimages.push({
      data: item,
      index: randomIndex
    });

    ptags[index].dataset.itemIndex = randomIndex;
  }
  var tlen = tempimages.length;



}


function displayAllImages() {
//console.log(tempimages.length)
  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) {


    ev.currentTarget.style.backgroundColor = '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) {
      alert("NO more images");
      rvalue();

    }
        displayAllImages();

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

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

Updated: Code is updated for resetting of boxes values.

Reloading values into array happens one place before than last place in javascript

Tags:

javascript

html

jquery

Jupiter

1 Answers

NullPointer

Recent Activity

Donate For Us

Reloading values into array happens one place before than last place in javascript

Tags:

javascript

html

jquery

Jupiter

1 Answers

NullPointer

Related questions

Recent Activity

Donate For Us