Stuck using onClick opening Dialog box

Question

Very new to this and am stuck already with an onClick command and it's puzzling me.

What's meant to happen: User clicks on the Shopping Cart text (within a div element which has been styled) and it opens a dialog box containing the users cart contents.

Here's the code below...

I think I've done a tad to much this week as I'm probably missing something really easy and am just being stupid.

Any help would be much appreciated.

Copy code

<script type="text/javascript">
$(function() {
$( 'div.dialog' ).dialog( {modal:true,autoOpen:false} );
$('CartLink').on( 'click', function() {
    var index = $(this).index() + 1;
    $( '#dialog' +  index ).dialog( 'open' );
});
});
</script>

    <div class="dialog" id="dialog1">Shopping Cart Contents</div>

<div id="CartLink" class="fluid ShoppingCart"><img src="images/Site/Shopping_cart.gif"         
alt="" width="25" height="23"/>Shopping Cart</div>

Answer 1

You are missing # before the id selector

$(function() {
    $( 'div.dialog' ).dialog( {modal:true,autoOpen:false} );
    $('#CartLink').on( 'click', function() {
    //.^.....add # here.......
        var index = $(this).index();
        $( '#dialog' +  index ).dialog( 'open' );
    });
});

Answer 2

Seem like you're missing # to target id here

$('#CartLink').on( 'click', function() {
//-^ here -----
    var index = $(this).index() + 1;
    $( '#dialog' +  index ).dialog( 'open' );
});

---

You need to change:

var index = $(this).index() + 1;

to:

var index = $(this).index();

because currently the index of your #CartLink is 1 not 0 as what you're expected. So you don't need to increase it by 1 anymore.