title: Get label value from constant array on drop
body: <p>I get the image name of dropped item without .jpg extension in ondrop() in <strong>var x</strong>.</p>
  
  <p>In <strong>var y</strong> i <strong>want</strong> to get the corresponding of x value from item[].</p>
  
  <p>Please drag and drop .box002 to box there are three .box classes with value</p>
  
  <p>Im planning to for a condition check so var y in necessary</p>
  
  <p>how to get it?</p>
  
  <p>how to get var y value?</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:40', url: '1.png'  },
        { label: '2:20', url: '2.png'  },
        { label: '3:50', url: '3.png'  },
        { label: '4:45', url: '4.png'  },
        { label: '5:35', url: '5.png'  },
        { label: '6:10', url: '6.png'  },
        { label: '7:15', url: '7.png'  },
        { label: '8:10', url: '8.png'  },
        { label: '9:30', url: '9.png'  }
      ]
     
  ptags = document.querySelectorAll('[name="values"]');
    
  
  
  
  for (let index = 0; index &lt; 3; index++) 
    {
        randomIndex = Math.floor(Math.random() * items.length),
        
        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);
   alert(data);
   alert(el);
   var x=document.getElementById("slide").src.split("/").pop().split(".")[0];
   alert(x);
   var y
  
    
   //if(x==y)
    {
    el.parentNode.removeChild; 
  
    
    ev.currentTarget.style.backgroundColor = 'initial'; 
  
    var pParagraph = ev.currentTarget.firstElementChild;
    ev.currentTarget.removeChild(pParagraph);
    
    displayAllImages();
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="container2"&gt;
      
              &lt;div id="container"&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:50px; height:50px; border-radius: 50%;" border="rounded"/&gt;
          
  &lt;/div&gt;    </code></pre>
  </div>
  </div>
  </p>