alert box sequence after an image has been loaded

Question

So I am trying to create pop up logic for a simple find an object game. So I created a an array of strings that I want to display 2 alert messages. The first alert stating hey you found [insertName].Then if you click on the same object again it display a generic message "you already found this". Then after all images have been clicked, I have a new page loaded based of the int count of items clicked. What I'm having trouble with is how to execute that first initial alert. I was thinking I would create another array for the initial alerts,but that when i got stuck.

<div id="b1" class="mybox">One</div>
<div id="b2" class="mybox">Two </div>
<div id="b3" class="mybox">Three </div>
<div id="b4" class="mybox">Four  </div>
<div id="b5" class="mybox">Effortless Calls  </div>
<div id="b6" class="mybox">Voicebot </div>

<script type="text/javascript">

    //$('body').css('background','blue');
    var Boxes = [];
    var ttle = $('.mybox').length;
    $('.mybox').click(function () {

    alert('Blah ');
    var bx = this.id;
    if (Boxes.indexOf(bx) >= 0){
        alert('You Already Found Object ');
    }else{
        Boxes.push(bx);
    }

    if (Boxes.length ==ttle)
        window.location = "#/finishedgame";
    });
</script>

Answer 1

You don't need another array, before you do Boxes.push(bx); why don't you just do alert(hey you found [insertName]); ? this should be the first time a user is touching a box aka when you want the first alert at least from what I gathered from your post. So

var Boxes = [];
var ttle = $('.mybox').length;
$('.mybox').click(function () {

   var bx = this.id;
   if (Boxes.indexOf(bx) >= 0){
       alert('You Already Found Object ');
   }else{
       var text = [get name of box here]
       alert("hey you found" + text);
       Boxes.push(bx);
   }

    if (Boxes.length ==ttle)
         window.location = "#/finishedgame";
});

Answer 2

Add a custom attribute to the your elements data-clicked="false"
When the user clicks the element set elem.setAttribute('data-clicked','true');

<div id="b1" class="mybox" data-clicked="false">One</div>
<div id="b2" class="mybox" data-clicked="false">Two </div>
<div id="b3" class="mybox" data-clicked="false">Three </div>
<div id="b4" class="mybox" data-clicked="false">Four  </div>
<div id="b5" class="mybox" data-clicked="false">Effortless Calls  </div>
<div id="b6" class="mybox" data-clicked="false">Voicebot </div>

$('.mybox').click(function (elem) {
    var clicked = $(elem).data('clicked');

    if(clicked){
        alert(msg1);
    } else {
        alert(msg1);
        elem.setAttribute('data-clicked','true');
    };

});