title: JavaScript function dosen't work correct
body: <p>I have a function that checking board is there a searching element.
  First script creating a board with different elements. Element in the square next to board is element that user has to find on the board and click them.</p>
  
  <p>User has to click (as quick as possible) all searching elements. After click on element function checking a board, is there more elements. If yes then nothing happen and user has to click another one. If on board there isn’t searching elements then function display a time and new board create. 
  But some reason function works correct only first time after page load. Latter function ignore more then one element on board or see element that doesn’t exist on board any more.
  Can you tell me what is wrong. </p>
  
  <p>Part of code bellow and there is a link to testing page.
  <a href="http://doomini2.linuxpl.info/font/" rel="nofollow">http://doomini2.linuxpl.info/font/</a></p>
  
  <p>Thank you  </p>
  
  <pre><code>function secondStage() {
    createBoxes(59);
    var usingSet = [];
    var i = 0;
    var boxList = document.querySelectorAll("#board &gt; div");
    createSet(usingSet, 20, shapes);
    (function paint() {
      if (i &lt;= 59) {
        var curentBox = boxList[i];
        curentBox.className = usingSet[draw(20)];
        curentBox.style.color = colors[draw(colors.length - 5)];
        timeStop = setTimeout(paint, 50);
        i++;
      } else {
        var findShape = boxList[draw(59)];
        toFind.className = findShape.className;
        toFind.style.color = findShape.style.color;
        findBoxes(boxList);
        clearTimeout(timeStop);
      }
    })();
  }
  
  //function checks boxes to find a proper shape 
  function findBoxes(boxList) {
    startTime = Date.now();
    board.addEventListener("mousedown", function (e) {
      if ((e.target.className === toFind.className)) {
        e.target.className = "correct";
        e.target.innerHTML = "OK";
        checkBoard();
      } else if (e.target.id === "board" || e.target.className === "correct") {
  
      } else {
        e.target.className = "false";
        e.target.innerHTML = "NO";
      }
    }, false);
    function checkBoard() {
      var condition = false;
      console.log(condition);
      for (var x = 0; x &lt; boxList.length; x++) {
        if ((boxList[x].className === toFind.className)) {
          condition = true;
          console.log(condition);
        }
      }
      if (condition === false) {
        var clickTime = Date.now();
        var timeResult = parseFloat(((clickTime - startTime) / 1000).toFixed(3));
        lastResult.innerHTML = timeResult + "s";
        secondResult[secondResult.length] = timeResult;
        console.log(secondResult);
        displayResult(secondStage);
      }
    }
  }
  
  //function displaig results after every single round
  function displayResult(stage) {
    cover.className = "";
    TweenMax.to("#lastResultDiv", 1, {ease: Back.easeOut, right: (winWidth / 4), });
    TweenMax.to("#go", 1, {ease: Back.easeOut, top: (winWidth / 3), onComplete: function () {
      goButton.addEventListener("click", function () {
        clear();
      }, false);
    }});
    //clear board and return to play                          
    function clear() {
      TweenMax.to("#lastResultDiv", 1, {ease: Back.easeIn, right: winWidth, });
      TweenMax.to("#go", 1, {ease: Back.easeOut, top: -100, onComplete: function () {
        cover.className = "hide";
        lastResultDiv.style.right = "-592px";
        toFind.className = "";
        board.innerHTML = "";
  
        if (firstStageRound === 10) {
          secondStage();
        } else if (secondStageRound === 5) {
          thirdStage();
        } else {
          stage();
        }
      }});
    }
  }
  </code></pre>