Image element disappears when using .click

Question

I've been trying to work on this for the last couple hours but I can't proceed without the last jquery function where I am trying to get the card (the king is a test card) to follow my mouse when I click on it. When I click it just disappears.

html:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Well, I've Never!!</title>
    <link type="text/css" rel="stylesheet" href="ivenever.css" />

  </head>

  <body>
      <aside>
          <input type="button" id="newgame" value="New Game" onclick="newGame()"/>
      </aside>

    <div id="table">

      <!--Containers for the computer's hand-->
      <div id="computer">
        <div id= "computerTableDown"></div>
        <div id= "computerTableUp"></div>
        <div id= "computerHand"></div>
      </div><!--computer container end-->

      <!--Container for the cards in the middle-->
      <div id="middle">
        <div id="undealtCards"></div>
        <div id="middleCards"></div>
      </div><!--middle container end-->


      <!--Containers for the Player's hand-->
      <div id="player">
        <div id= "playerTableDown"></div>
        <div id = "playerTableUp"></div>
        <div id= "playerHand"></div>
      </div><!--player container end-->

    </div><!--Table end-->

    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="carddeck.js"></script>
  </body>
</html>

JS/JQUERY:

// the array that holds the cards
var deck;
//the deck of cards object
var newDeck;

//the players hand
var playerHand;
var playerUp;
var playerDown;
//the computer's hand
var compHand;
var compUp;
var compDown;

//the cards in the middle
var middleCards;

//Players turn
var playersTurn = true;

function Card (rank, suit, url)
{
    this.rank= rank;
    this.suit = suit;
    this.url = url;
}
//the function that will return the rank of the card
Card.prototype.getRank = function ()
{
    return this.rank;
}
//the function that returns the suit (not really needed for my game)
Card.prototype.getSuit = function ()
{
    return this.suit;
}
//the function for returning the url of the card for displaying
Card.prototype.getUrl = function ()
{
    return this.url;
}

function CardDeck ()
{
    deck = [];
    //fill array diamonds
    for (var i=0; i < 13; i++)
    {
        var cardD = new Card(i+1, "diamonds", ( "images/diamonds/" + (i+1)+"diamond.png"));
        deck.push(cardD);
    }

    //fill array clubs
    for (var i=0; i < 13; i++)
    {
        var cardC = new Card(i+1, "clubs", ("images/clubs/" + (i+1)+"club.png"));
        deck.push(cardC);
    }

    //fill array hearts
    for (var i=0; i < 13; i++)
    {
        var cardH = new Card(i+1, "hearts", ("images/hearts/" + (i+1)+"heart.png"));
        deck.push(cardH);
    }

    //fill array spades
    for (var i=0; i < 13; i++)
    {
        var cardS = new Card(i+1, "spades", ("images/spades/" + (i+1)+"spade.png"));
        deck.push(cardS);
    }
}

//displaying the deck (mostly for debugging etc)
CardDeck.prototype.showDeck = function ()
{
    var allCards ="";
    for (var i =0 ; i < deck.length; i++)
        allCards += "card with the rank " + deck[i].getRank() +" of " + deck[i].getSuit() + " has an image url of " + deck[i].getUrl()+"\n";
    alert(allCards);
}

//shuffle the cards
CardDeck.prototype.shuffle = function ()
{
    var shuffledDeck = deck;
    for (var i =0; i< 10; i++)
    {
        for (var i = 0; i < shuffledDeck.length; i++)
        {
            var random = Math.floor((Math.random()*51));
            var tmp = shuffledDeck[i];
            var tmp2 = shuffledDeck[random];
            shuffledDeck[i]= tmp2;
            shuffledDeck[random]= tmp;
        }

    }
    deck=shuffledDeck;
}

//deal a card as long as there at least one left in the deck
CardDeck.prototype.dealCard = function ()
{
    if (deck.length >0)
    {
        var dealtCard = deck[0];
        deck.shift();
        return dealtCard;
    }
    else
    {
        //jquery to get rid of the image element
        $('#undealtCards').replaceWith('<img src="images/cardempty.png" class="noHand" height="100" width="69"/>');
    }
}

//create the deck that will be used
function makeDeck()
{
    iveNever = new CardDeck();
}

function newGame()
{
    //reset everything
    //$('#computerTableDown').replaceWith('');
    //initialize deck
    makeDeck();
    iveNever.shuffle();
    $('#undealtCards').append('<img src="images/cardback.png" class="hand" height="100" width="69" onclick="drawCard()"/>');

    //initialize player's hand
    playerHand = [];
    playerUp=[];
    playerDown=[];

    //initialize computer's hand
    compHand = [];
    compUp=[];
    compDown=[];

    initialDeal();
    showHands();
}

function initialDeal()
{
    for (var i =0; i<6; i++)
    {
        if (i % 2 === 0)
            compDown.push(iveNever.dealCard());
        else
            playerDown.push(iveNever.dealCard());
    }

    for (var i =0; i<6; i++)
    {
        if (i % 2 === 0)
            compUp.push(iveNever.dealCard());
        else
            playerUp.push(iveNever.dealCard());
    }

    for (var i =0; i<6; i++)
    {
        if (i % 2 === 0)
            compHand.push(iveNever.dealCard());
        else
            playerHand.push(iveNever.dealCard());
    }
}
//function for showing hands (currently for debugging)
function showHands()
{

    //show the down cards
    for (var i=0; i < 3; i++)
    {
        //computers down cards
        $('#computerTableDown').append('<img src="images/cardback.png" class="cardsTable" height="100" width="69">');
        $('#playerTableDown').append('<img src="images/cardback.png" class="cardsTable" height="100" width="69">');
    }

    //show the down cards
    for (var i=0; i < 3; i++)
    {
        //computers up cards
        $('#computerTableUp').append('<img src="' + compUp[i].getUrl() + '" class="cardsTable" height="100" width="69">');
        $('#playerTableUp').append('<img src="' + playerUp[i].getUrl() + '" class="cardsTable" height="100" width="69">');
    }

    //show the Hand cards
    for (var i=0; i < 3 ; i++)
    {
        $('#playerHand').append('<img src="' + playerHand[i].getUrl() + '" class="cardsHand" height="100" width="69" onclick="pickupCard()"> ');
        $('#computerHand').append('<img src="' + compHand[i].getUrl() + '" class="cardsHand" height="100" width="69"> ');
    }

}

function drawCard()
{
    //only for player at this moment
    if (playersTurn)
    {
        playerHand.push(iveNever.dealCard());
        updatePlayerHand();
    }
    else
    {
        //compHand.push(iveNever.dealCard());
        //updateComputerHand();
    }
}

function updatePlayerHand()
{
    //show the player's Hand cards
    for (var i=playerHand.length-1; i < playerHand.length ; i++)
    {
        $('#playerHand').append('<img src="' + playerHand[i].getUrl() + '" class="cardsHand" height="100" width="69" onclick="pickupCard()">');//onclick="pickupCard()"
    }
}

function updateComputerHand()
{
    //show the Hand cards
    for (var i=compHand.length-1; i < compHand.length ; i++)
    {
        $('#computerHand').append('<img src="' + compHand[i].getUrl() + '" class="cardsHand" height="100" width="69">');
    }

}

$('#playerHand').click(function(e){
    $('img.heh').css
    ({
        'top': (e.clientY - 20), 
        'left': (e.clientX - 20)
    });
});

CSS:

body{

}
#table{
    width:1000px;
    height:800px;
    background-image: url('images/felt.png');
    position:absolute;
    z-index: 0;

}

#computer{
    position:absolute;
    left:0;
    right:0;
    margin-left: auto;
    margin-right: auto;
    top:0px;
    width:900px;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
}

#computerTableDown{
    position:absolute;
    left:0;
    right:0;
    margin-left: auto;
    margin-right: auto;
    top:150px;
    width:300px;
    height: 125px;
    margin-left: auto;
    margin-right: auto;
}

#computerTableUp{
    position:absolute;
    left:0;
    right:0;
    margin-left: auto;
    margin-right: auto;
    top:150px;
    width:300px;
    height: 125px;
    margin-left: auto;
    margin-right: auto;
}

#computerHand{
    position:absolute;
    left:0;
    right:0;
    margin-left: auto;
    margin-right: auto;
    top:5px;
    width:900px;
    height: 125px;
    margin-left: auto;
    margin-right: auto;
    border-style: dashed;
    border-width: 2px;
    border-color: black;
}

#middle{
    position:absolute;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    top:300px;
    width:500px;
    height:200px;
}

#middleCards{
    position:absolute;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    top:0px;
    width:300px;
    height:200px;
    border-style: dotted;
    border-width: 2px;
    border-color: black;
    cursor: default;
}

#undealtCards{
    postion:absolute;
    left:0;
    right:0;
    top:0;
    margin-left: 10px;
    margin-top: 50px;
    top:10px;
    width:70px;
    height:100px;

}

.hand{
    cursor: hand; 
    cursor: pointer;
}

.noHand{
        cursor: default; 
}

#player{
    position:absolute;
    left:0;
    right:0;
    margin-left: auto;
    margin-right: auto;
    top:500px;
    width:900px;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
}

#playerTableDown{
    position:absolute;
    left:0;
    right:0;
    margin-left: auto;
    margin-right: auto;
    top:15px;
    width:300px;
    height: 125px;
    margin-left: auto;
    margin-right: auto;
}

#playerTableUp{
    position:absolute;
    left:0;
    right:0;
    margin-left: auto;
    margin-right: auto;
    top:15px;
    width:300px;
    height: 125px;
    margin-left: auto;
    margin-right: auto;
}

#playerHand{
    position:absolute;
    left:0;
    right:0;
    margin-left: auto;
    margin-right: auto;
    top:160px;
    width:900px;
    height: 125px;
    margin-left: auto;
    margin-right: auto;
    border-style: dashed;
    border-width: 2px;
    border-color: white;
}

.cardsTable {
    margin-top:10px;
    margin-left:24px;
}

.cardsHand{
    margin-top:10px;
    margin-left:24px;
    cursor: hand; 
    cursor: pointer;
}

.heh{
    display:block;
    position:absolute;
    z-index: 2000;
}

Now, I am trying to get the image to follow my mouse but when I click it it just disappears. It doesn't throw any console errors, it just disappears. I was asked to post the whole code so I've gone ahead and done that.

I notice that you are doing this when the `#playerHand` div is being clicked. That div, unless you are not displaying other CSS, is the same size as the card. — TylerH4, Mar 10 '13 at 08:14

Bart · Answer 1 · 2013-03-10T12:35:46.053

0

I tried the code in your post. But it doesn't seem to do very much except for the card generating. I think you need to look at http://jqueryui.com/draggable

Your card game would be much more usable if you could just drag the cards.

edited Mar 10 '13 at 12:35

answered Mar 10 '13 at 08:11

Bart

17,070
5
61
80

I also noticed the image is not a block element. So the `left` and `right` should not affect it. Try adding `display:block;` to `.heh` – Bart Mar 10 '13 at 08:16
Updated my answer. Maybe you do something with it :-) – Bart Mar 10 '13 at 12:03
I'll take a look. Yes, it is no where near finished. I wanted to get the cards dragable before I flushed out the rules. Unfortunately I got stuck and nothing more got done other than generating the cards :( I'm new to jquery. – user1792457 Mar 10 '13 at 18:11
This would get you up to speed http://www.elated.com/articles/drag-and-drop-with-jquery-your-essential-guide/ – Bart Mar 10 '13 at 20:59
thank you so much. jquery ui + livequery made it so I can drag the cards I auto generate. You're a hero. I wish I could upvote you to the moon! – user1792457 Mar 10 '13 at 23:08

score 0 · Answer 2 · answered Mar 10 '13 at 08:33

0

Working for me as well. you need to share your entire code or provide a fiddle which doesn't work

http://jsfiddle.net/SVKeE/

$(function() {
$('#playerHand').click(function(e){
    //$(this).removeClass('cardsHand');
    //$(this).addClass('clickedCard');
    $('img.heh').css
    ({
        'top': (e.clientY - 20), 
        'left': (e.clientX - 20)
    });
});
});

answered Mar 10 '13 at 08:33

vdua

1,281
1
14
24

you forgot the function pickupCard. try this jsbin http://jsbin.com/egelip/3/edit Add the function in javascript box. – vdua Mar 11 '13 at 12:59
I assume you want to add class heh, if I am wrong change the function. try this jsbin http://jsbin.com/egelip/20/edit This works, you had some problems with the code. I have fixed it. Please have a look – vdua Mar 11 '13 at 13:25
Please look at this question for difference in pageX/pageY and clientX/clientY http://stackoverflow.com/questions/6073505/what-is-the-difference-between-screenx-y-clientx-y-and-pagex-y – vdua Mar 11 '13 at 13:28

Image element disappears when using .click

2 Answers2