title: want to Set Value random index to item and corresponding image to tempImages in javascript
body: <p>How to get label so that it can be set to <strong>ptags</strong> to display inside class <strong>box</strong> and push currusponding item to <strong>tempImages[]</strong>
  like i have already done.</p>
  
  <p>The code shown <strong>Const randItem2</strong> which selects random label and its url without duplicates from array <strong>Items</strong>  </p>
  
  <p>In short, how to display the randomly selected value without duplicates  <strong>Const randItem2</strong>  its label value to <strong>ptags</strong> and its url to its <strong>tempImages[]</strong> , like the same effects as code below Const randItem2</p>
  
  <p>Is there any way i can achieve this?</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 tempimages = [];
  
  function rvalue() {
    const
      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' }
            ],
  ptags = document.querySelectorAll('[name="values"]');
    
    
   
  var lastnumber=0;  
  for (let index = 0; index &lt; 3; index++) 
    {
        randomIndex = Math.floor(Math.random() * items.length),
       // const randItem2 = Array.from({ length: 3 },() =&gt; {const randomIndex = Math.floor(Math.random() * items.length);const [item] =                                                        items.splice(randomIndex, 1);return item;
  
        item = items[randomIndex];
        ptags[index].textContent = item.label;
        tempimages.push(item);
   
       
    }
  
  }
  
  
  function displayAllImages() {
  
    if (tempimages.length === 0) 
    {
      return;
    }
    
     
      item = tempimages.shift(),
  
      image = document.getElementById('slide');
   
    image.src = item.url;
  };
  
  $(function() {
   
    rvalue();
    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 el = document.getElementById(data);
  
    el.parentNode.removeChild; 
   
    ev.currentTarget.style.backgroundColor = 'initial'; 
  
    var pParagraph = ev.currentTarget.firstElementChild;
    ev.currentTarget.removeChild(pParagraph);
    
    // Show the next image in the slider..
    displayAllImages();
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#container {
    margin-top:-2%;
    white-space:nowrap;
    text-align:center;
    margin-left:20%;
    margin-right:30%;
  }
  
  .box {
    background-color: coral;
    width: 60px;
    height:60px;
    margin-top:10px;
    display:inline-block;
    border-radius:5px;
    border:2px solid #333;
    border-color: #e6e600;
    border-radius: 10%;
    background-color:  #ff00ff;
  }
  
  .box002 {
    float: left;
    width: 50px;
    height: 50px;
    float: left;
    margin-left:30%;
    margin-top:-20px;
    padding-top:2%;
    background-color:#ffff00 2px;
    border:2px solid #000066;
  } 
  
  .text {
    padding: 20px;
    margin:7 px;
    margin-top:10px;
    color:white;
    font-weight:bold;
    text-align:center;
  }
  
  #container {
    white-space:nowrap;
    text-align:center;
    margin-left:20%;
    margin-right:30%;
  }
  
  .text {
    padding: 20px;
    margin:7 px;
    margin-top:10px;
    color:white;
    font-weight:bold;
    text-align:center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;body onload="rvalue()"&gt;
  
  &lt;div class="containerr"&gt;
      
  &lt;div id="container" style="margin-bottom:10%"&gt;
  
  &lt;div class="box"  ondrop="drop(event)" ondragover="allowDrop(event)" id="10"&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 class="box002" draggable="true" ondragstart="drag(event)" id="2"&gt;
  
           &lt;img src=""  draggable="true" id="slide" style="width:30px; height:30px; border-radius: 50%;" border="rounded"/&gt;
          
  &lt;/div&gt; 
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>