Loop condition not checked

Question

I'm learning and tried writing a reaction tester. Two questions:

Why does my while loop continue to run after j exceeds 3? And what can I do against it?
Is there a better way to achieve what I'm doing here (honestly a bit confused about event driven programming)?

Code:

<!doctype html>
<html>
<head>
   <meta charset="utf-8" />
   <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <style type="text/css">
   .buttonBox{
      background-color:red;
      padding:50px;
      border: none;
   }
   #ersteBox{
      position:absolute;
      left:500px;
      top:300px;
      display:none;
   }
   #zweiteBox{
      position:absolute;
      left:500px;
      top:600px;
      display:none;
   }
   </style>
</head>

<body>
   <div>Click the appearing boxes as fast as possible!</div>
   <button id="starter">Start</button>

   <button id="ersteBox" class="buttonBox"> </button>
   <button id="zweiteBox" class="buttonBox"> </button>

   <script>
       var boxesi=["ersteBox","zweiteBox"];
       var j=0;
       var i;

       document.getElementById("starter").onclick=function(a){
          show_random();
          while ( j<4 ){
          for (let k=0; k<boxesi.length ; k++)
          document.getElementById(boxesi[k]).onclick=function(){
             if (k==i) {
                this.style.display="none";
                show_random();
                j=j+1;
                console.log(j);
                };
             };
             a();
          };
          alert("done");
       };

       function show_random(){
          i=Math.floor(Math.random()*2);
          var b=boxesi[i];
          document.getElementById(b).style.display="inline";
       };
   </script>
</body>
</html>

Edit: Why duplicate? There should be no closure in the loop, since I used let to define k.

Edit: I applied the changes imposed by Loaf. However, the condition is still not checked.

   <script>
       var boxesi=["ersteBox","zweiteBox"];
       var j=0;
       var buttons=[].slice.call(document.getElementsByClassName("buttonBox"));

       document.getElementById("starter").onclick=function(a){
          show_random();
          while ( j<4 ){
             buttons.forEach(function(box,k){
                box.onclick=function(){
                   console.log(k);
                   if (k==i) {
                      box.style.display="none";
                      show_random();
                      j=j+1;
                      console.log(j);
                   };
                };
             });
             a();
          };
          alert("done");
       };

       function show_random(){
          i=Math.floor(Math.random()*2);
          var b=boxesi[i];
          document.getElementById(b).style.display="inline";
       };
   </script>

I would remove the while loop and edit your for loop. `for (let k=0; (k= 4 because it never reaches the end to check the conditions. — Loaf, Jan 04 '17 at 14:00
I'm really new to javascript, could you answer a little more detailed? — PeMa, Jan 04 '17 at 14:00
Yea, the while loop conditions are only checked when it reaches the end of the while loop. Your for loop could run 50 times, making J 50, but because it never exits and returns to the while loop, it won't check the conditions `j < 4` — Loaf, Jan 04 '17 at 14:03
@Loaf: I understand what you say. But why does the for loop never exceed? It should run until 2, no? — PeMa, Jan 04 '17 at 14:12
Ah, I took a little time to read your code. So you are assigning a onclick handler to the buttons. I would change how you are doing this. You can do this with JQuery like this `$(".buttonBox").click("function(){//dowhatever});` or add it to all buttons on the page `$("button").click("function(){//dowhatever});`. If you want to do it with pure JavaScript and no JQuery, something like this. `var buttons = getElementsByClassName("buttonBox");` and do a foreach loop for the buttons array. — Loaf, Jan 04 '17 at 14:22

Loop condition not checked

0 Answers0