Click event in javascript

Question

I'm a little new to HTML, CSS et al. I'm having trouble with the click event on a html page.

HTML

<div class="Box1 DaddyBox"></div>
<div class="Box2 DaddyBox"></div>
<div class="Box3 DaddyBox"></div>

CSS

.DaddyBox{
    border:thick;
    border-color:#FFF;
}

.DaddyBox:hover{
    background: green;
}

.Box1 {
    position: absolute;
    left: 16px;
    top: 96px;
    width: 320px;
    height: 96px;
    z-index: 1;
    background-color: #F5E255;  
}

JS

$('.Box1').click(function(){
    alert(Alert)
});

Is there something glaringly obvious that I'm missing? I am not getting the alert on click of the Box.

If clarity is required, I'm trying to create a grid like interface for a website. Each box will link to a new page. Again, I'm new to this and am only attempting what I have learned so far, so perhaps I am way off, feel free to point me in a new direction.

Thanks

Answer 1

include java library in header

<script src="//code.jquery.com/jquery-1.10.2.js"></script>

$(document).ready(function(){ 
    $('.Box1').click(function(){
        alert("Alert"); //add quotes  
    });
});

Answer 2

you missed quotes for the message in alert(), change to:

....
alert("Alert");
...

and include jQyery library, and wrap your code in $(document).ready(function(){ ... }); if not already done, as:

$(document).ready(function(){ 
    $('.Box1').click(function(){
        alert("Alert"); //add quotes to your message Alert
    });
});