How to loop a function using condition

Question

I have implemented two div classes box and box2, box2 can be dragged to any of three div classes box. class box contains randomly selected values from array and class box2 contains its correponding imagedisplayed , so that it can be dragged to any of class box.

I have stored the corresponding images in tempimages array and tried to check if tempimages==0 in drop() function so that once values are over the counter takes value from array items and fill the class box.

Im not able to do the above mentioned looping

How to refill the box with values and repeat the process.

How do i achieve this?

 var 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' }, { label: '10:40', url:'10.png' }, { label: '11:20', url:'11.png' } ] var tempimages = []; var array2=[]; array2 = items.slice(); var len=array2.length; console.log(len); var item; function rvalue() { ptags = document.querySelectorAll('[name="values"]'); console.log(items); console.log(array2); console.log(ptags); console.log(ptags) 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; console.log(tempimages[0]) console.log(tempimages); console.log(tlen); } 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); console.log(array2); displayAllImages(); console.log(tempimages.length); alert("sucessfull"); if (tempimages.length == 0) { alert("NO more images"); rvalue(); } } else { alert("WRONG PLACE"); } }

 .box { width: 35px; height:35px; display:inline-block; border-radius:5px; border:2px solid #333; border-color: #e6e600; margin:-2px; border-radius: 10%; background-color: #bfff80; vertical-align: middle; } .box2 { float: left; width: 30px; height: 30px; float: left; margin-top:3%; padding-top:2%; border:1px solid #000066; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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>

Answer 1

If you want to loop a function with a condition, you can use JavaScript and use the function inside a function technique.

The syntax is:

function function () {
    if (condition) {
        // Your code

        // Call the function
        function();
    }
};

function();

An example is:

 var number = 0; function writeNumbers() { if (number < 11) { document.write(number + "<br>"); number++ writeNumbers(); } }; // Call the function writeNumbers();

You could also use a for loop .

The syntax is:

for(variable; condition; variable++) {
    // Your code
}

An example is:

 for (var number = 0; number < 11; number++) { document.write(number + "<br>"); };

Answer 2

You should use Recursion Function technique.

Recursion is the process in which a function is called by itself, either directly or indirectly. Recursion allows you to write some very elegant code. But when using recursion you need to be aware of the pitfals.

For example: We suppose this loop start from 0 to 9 (10 times.)

function function (initValue) {    
    if (initValue > 10) {
          return;
    }
    function(initValue++);
};

Answer 3

It is maybe because the target element is no longer at the DOM the image tag is remove by the function 'drop()'

function drop(ev){
 if(x==y){
  // el.parentNode.removeChild; <-- try to remove this line
 }
}

that causes an error in your function 'displayAllImages()' at this line:

image = document.getElementById('slide'); //<--- try not to remove this target
image.src = item.data.url;
image.dataset.itemIndex = item.index;