0

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

1
  • learn basics of javascript, before you learn jQuery, Alert is a variable , "Alert" is a String . Understand Difference. Commented Apr 20, 2014 at 17:51

2 Answers 2

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
    });
});
Sign up to request clarification or add additional context in comments.

Comments

0

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  
    });
});

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.