title: backgroundimage change of body using jquery in second loop fails
body: <p>I have a code in which,</p>
  
  <p>I have three <strong>classes box</strong> with randomly selected image and from <strong>array items</strong>,  there is a square <strong>box002</strong> at right lower portion, this <strong>can be drag and droppped to any of three box</strong> <code>if it find match the box will dissappear</code> . likwise three box will dissappear.</p>
  
  <p>then a class <strong>bodyblue is added to body</strong> with backgroundImage named <code>middle bg</code> is added to body for <code>10 seconds</code> . after again 3 box appear for drag and drop.</p>
  
  <p>in the <strong>second level</strong> after this three boxes are dragged&amp;dropped and deleted, when <strong>bodyblue is added to body the backgroundImage</strong> <strong><code>middle bg</code></strong> <strong>is not appearing in for 10 seconds.</strong></p>
  
  <p><code>How to add bodyblue backgroundImage to body using jquery in second level and third level?</code></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var array2 = [];
  var arraycart = [];
  var disparray = [];
  var bg = [];
  var dataURL;
  var timeOut;
  counter = 0;
  
  var items = [{
   label: '1',url: 'https://via.placeholder.com/150x150.jpg?text=image1'},
    {label: '2',url:'https://via.placeholder.com/150x150.jpg?text=image2'},
    {label: '3',url:'https://via.placeholder.com/150x150.jpg?text=image3'},
    {label: '4',url:'https://via.placeholder.com/150x150.jpg?text=image4'},
    {label: '5',url:'https://via.placeholder.com/150x150.jpg?text=image5'},
    {label: '6',url:'https://via.placeholder.com/150x150.jpg?text=image6'},
    {label: '7',url:'https://via.placeholder.com/150x150.jpg?text=image7'},
    {label: '8',url:'https://via.placeholder.com/150x150.jpg?text=image8'},
    {label: '9',url:'https://via.placeholder.com/150x150.jpg?text=image9'},
    {label:'10',url:'https://via.placeholder.com/150x150.jpg?text=image10'}
  ];
  
  
  var notes = ['https://via.placeholder.com/150x150.jpg?text=image1',
    'https://via.placeholder.com/150x150.jpg?text=image2',
    'https://via.placeholder.com/150x150.jpg?text=image3',
    'https://via.placeholder.com/150x150.jpg?text=image4',
    'https://via.placeholder.com/150x150.jpg?text=image5',
    'https://via.placeholder.com/150x150.jpg?text=image6',
    'https://via.placeholder.com/150x150.jpg?text=image7',
    'https://via.placeholder.com/150x150.jpg?text=image8',
    'https://via.placeholder.com/150x150.jpg?text=image9',
    'https://via.placeholder.com/150x150.jpg?text=image10'
  ];
  
  
  var tempimages = [];
  var notesselected = [];
  
  array2 = items.slice();
  
  var item;
  
  
  //----------------------------------------------change backgroundImage----------------------------------------------------------
  
  
  function changemainbackground() {
    debugger;
    var c = document.getElementById('main');
  
  
    var img = document.getElementById('main'),
      style = img.currentStyle || window.getComputedStyle(img, false),
      bi = style.backgroundImage.slice(4, -1).replace(/"/g, "");
  
    // Display the url to the user
    //console.log('Image URL: ' + bi);
  
  
    bodycontents = document.getElementById('main');
  
    if (counter &gt;= 0) {
      bodycontents.style.backgroundImage = 'url(' + bg[counter] + ')';
      d = bodycontents.style.backgroundImage = 'url(' + bg[counter] + ')';
      //console.log(d);    
  
  
    }
    counter++;
  
    //console.log("counter is"+counter);
    //console.log(bodycontents);
    //console.log(d);
  
  }
  //--------------------------^^^^^change backgroundImage end here^^^^^^^--------------------------------------------------------
  
  
  //----------------------------------------------hiddenImage------------------------------------------------------------------------
  
  hiddenimgnumber = 0;
  
  var images = ['https://picsum.photos/200/300', 'https://picsum.photos/200/300', 'https://picsum.photos/200/300'];
  
  //var bg=['https://via.placeholder.com/150x150.jpg?text=image1','https://via.placeholder.com/150x150.jpg?text=image2'];
  var bg = ['https://picsum.photos/200/300?image=2', 'https://picsum.photos/200/300?image=3', 'https://picsum.photos/200/300?image=4'];
  
  var refreshIntervalId = setInterval(function() {
    image = document.getElementById('hiddenimageid');
    image.src = images[hiddenimgnumber];
  }, 1)
  
  
  function hiddenimage() {
  
    clearInterval(refreshIntervalId);
    image = document.getElementById('hiddenimageid');
    image.src = images[hiddenimgnumber];
  
    //console.log(hiddenimgnumber);
    hiddenimgnumber++;
  
  
  }
  
  //-------------------------------------------------^^^hidden Image ends^^^------------------------------------------------------
  
  
  window.onload = function() {}
  
  function rvalue() {
    elements = document.getElementsByClassName("box");
  
    for (var i = 0; i &lt; elements.length; i++) {
      //debugger;
      elements[i].style.border = "2px solid  #c57232 ";
      elements[i].style.borderBottom = "5px solid  #c57232 ";
      //object.style.borderRadius = "1-4 length|% / 1-4 length|%|initial|inherit"
  
    }
  
    ptags = document.querySelectorAll('[name="values"]');
    boxtags = document.getElementsByClassName("box");
    //if array length is 0 then we need to identify the game as completed
    if (array2.length === 0) {
      alert('Game completed');
      return;
  
    }
  
    for (var index = 0; index &lt; 3; index++) {
      randomIndex = Math.floor(Math.random() * array2.length)
  
      item = array2[randomIndex];
      array2.splice(randomIndex, 1);
  
      try {
        //ptags[index].style.visibility = "visible";
        //ptags[index].textContent = "RS."+item.label;
        ptags[index].dataset.itemLabel = item.label;
  
        //using label as an identity
        tempimages.push({
          data: item,
          label: item.label
        });
        notesselected.push({
          data: item.url,
          label: item.label
        });
  
        boxtags[index].style.backgroundImage = 'url(' + item.url + ')';
  
      } catch (err) {
        // console.log('Exception');
      }
    }
  
    var tlen = tempimages.length;
  }
  
  
  function displayAllImages() {
    try {
  
      if (tempimages.length == 0) {
        rvalue();
  
      }
  
      if (tempimages.length === 0) {
        image = document.getElementById('slide');
        image.style.display = 'none';
        return;
      }
  
      // getting random item from the available items
      var arr2 = tempimages;
      item = arr2[Math.floor(Math.random() * arr2.length)]
  
      image = document.getElementById('slide');
      //getting notes item
      //console.log(item);
      ///////console.log(item.label);
      var dataURL = notes.filter(a =&gt; a.indexOf("?text=" + item.label) &gt; 0)[0];
      //var dataURL =item.url;
      //var dataURL = item.label;
      console.log(dataURL);
      image.src = dataURL;
      image.dataset.itemLabel = item.label;
  
    } catch (err) {
      //console.log(err.message);
    }
  };
  
  $(function() {
    displayAllImages();
  });
  
  function allowDrop(ev) {
    ev.preventDefault();
  }
  
  function drag(ev) {
    ev.dataTransfer.setData("Text", ev.target.id);
  }
  
  function drop(ev) {
  
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
  
  
    var x = document.getElementById("slide").dataset.itemLabel;
    var y = ev.target.dataset.itemLabel;
  
  
    //add improvisation box drag is valid
    if (ev.target.tagName === "DIV") {
      y = ev.target.children[0].dataset.itemLabel;
    }
  
    //console.log(x);
    //console.log(y);
  
    if (x == y) {
      ev.currentTarget.style.backgroundColor = 'initial';
      ev.currentTarget.style.backgroundImage = 'initial';
      ev.currentTarget.style.border = 'initial';
      var pParagraph = ev.currentTarget.firstElementChild;
  
      pParagraph.style.visibility = "hidden";
  
      item = this.item;
      tempimages = tempimages.filter(a =&gt; a.label !== item.label);
  
  
  
      if (tempimages.length == 0) {
        rvalue();
        hiddenimage();
        animateCongrat();
  
      }
      displayAllImages();
    } else {
  
    }
  }
  
  
  //-----------------------------&gt;&gt;&gt;animate congarat starts here-------------------------------------------------------------
  
  var timeOut;
  
  function animateCongrat() {
  
  
    //debugger;
    $('.congrats').show();
  
    clearTimeout(timeOut);
    addBlueBody();
  
  
  
  
  
    hideCongratAndBlueBody();
  }
  
  
  
  function addBlueBody() {
  
    $("html").css("background-color", "  #070755  ");
    $('body').addClass('bodyblue')
  
    //console.log(url);
    $('#container').hide();
    $('#2container').hide();
    $('#3container').hide();
    $('#2').hide();
    $('.completed').hide();
  
    
    
  
  }
  
  function hideCongratAndBlueBody() {
    timeOut = setTimeout(() =&gt; {
      $('.congrats').hide();
      $("html").css("background-color", "");
      $('body').removeClass('bodyblue')
      $('#container').show();
      $('#2container').show();
      $('#3container').show();
      $('#2').show();
  
      $('.completed').hide();
    
  
      changemainbackground();
    }, 10000);
  
  }
  
  //-----------------------------&gt;&gt;&gt;animate congarat ends here-------------------------------------------------------------</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    overflow: hidden;
  }
  
  .dashed {
    border: 2px dashed #999 !important;
  }
  
  .bodyblue {
    background-image: url(https://via.placeholder.com/1000x600?text=Middle+bg);
    height: 100vh;
    width: 100vw;
  }
  
  ul {
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
  }
  
  .box {
    width: calc(33.3% - 4px);
    border-radius: 5px;
    border: #000 border-color: #e6e600;
    margin: -2px;
    background-color: #99ffff;
    height: 16vh;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
  }
  
  .box002 {
    position: absolute;
    top: 74.3vh;
    left: 77.98vw;
    cursor: pointer;
      border: 2px solid black;
  }
  
  .box002 img {
    width: 15.0vw;
    height: 15.0vh;
    border-radius: 0%;
  }
  
  #container {
    white-space: nowrap;
    border: px solid #CC0000;
  }
  
  .containerr {
    border: px solid #FF3399;
  }
  
  .pic {
    background-size: 100% 100%;
  }
  
  .container2 {
    width: 29.0vw;
    position: fixed;
    top: 23.9vh;
    left: 19.2vw;
  }
  
  body {
    background-image: url(https://picsum.photos/200/300?image=0);
    background-size: 100vw 100vh;
  }
  
  .reset img:hover {
    opacity: 1
  }
  
  .hiddenimage {
    position: absolute;
    top: 4.3vh;
    left: 50vw;
    cursor: pointer;
  }
  
  .hiddenimage img {
    width: 10.3vw;
    height: 10.5vh;
    border-radius: 15%;
  }
  
  .hand {
    position: absolute;
    top: 45.3vh;
    left: 17vw;
    cursor: pointer;
  }
  
  .hand img {
    width: 25.3vw;
    height: 25.5vh;
    border-radius: 0%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="container2"&gt;
    &lt;div class="containerr"&gt;
      &lt;div class="pic" id="content"&gt;
  
  
        &lt;div id="container"&gt;
  
          &lt;div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="10" style=""&gt;
            &lt;p name="values"&gt;&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="11"&gt;
            &lt;p name="values"&gt;&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="12"&gt;
            &lt;p name="values"&gt;&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="box002" draggable="true" ondragstart="drag(event)" id="2"&gt;
    &lt;img src="" draggable="true" id="slide" border="rounded" /&gt;
  &lt;/div&gt;
  
  &lt;div class="congrats"&gt;
    &lt;div class="hiddenimage" style="display:none;"&gt;
      &lt;img src="" id="hiddenimageid" /&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>