First function Call Behavior

[Buckwheat999]

I have a question about some curios behavior of my card placement routine. This to deal out the empire cards at the beginning of the game, one to each of the 5 tables. I hard coded the routine to get it working right and there is some strange behavior I need to address before I start making the call with variables.

So the first call to the routine puts the card in a weird place. Inspecting the HTML puts the card at:

<div class="playertablecard empirecard" id="empirespot" style="background-position: 85px 60px; top: 326.236px; left: 437.146px;"> </div>

The 2nd call puts it here:

<div class="playertablecard empirecard" id="empirespot" style="background-position:85px 60px;"> </div>

Right where I want it. All the random positioning data is gone and all calls after the 1st one work fine. The first puts a random card out in the middle of the board.

****************
Is there something I need to clear out before I start making calls and putting the cards out?
****************


// the card_graphic_x and the card_graphic_y are the location of the particular card in the card
// graphic that contains all the cards (empire.png)
// empireToPlayOn is the empire play table to use (tables 1-5)

this.playEmpireCardOnTable(player_id, 1, 1, 1); // First call puts card in weird place
this.playEmpireCardOnTable(player_id, 1, 1, 1); // Puts card in right place. All calls after the 1st call work fine

playEmpireCardOnTable: function(player_id, card_graphic_x, card_graphic_y, empireToPlayOn)
{
console.log('PlayEmpireCardOnTable');
dojo.place(this.format_block('jstpl_empire_card', {
x : this.empirecardwidth * card_graphic_x,
y : this.empirecardheight * card_graphic_y}),
'empire' + empireToPlayOn);
this.placeOnObject('empirespot', 'overall_player_board_' + player_id);

this.slideToObject('empirespot', 'empire' + empireToPlayOn).play();
},

[Conardist]

<div class="playertablecard empirecard" id="empirespot" style="background-position: 85px 60px; top: 326.236px; left: 437.146px;"> </div>

I believe the decimal point in the style is causing problems. top: 326.236px; left: 437.146px

probably needs to be something like this:

style="background-position: 85px 60px; top: 326px; left: 437px;"

or this:

style="background-position: 85px 60px; top: 236px; left: 146px;"


~ Joe

[paramesis]

The decimal point isn't going to cause this behavior. There are multiple DOM elements with the same id. The second time you call playEmpireCardOnTable, there is already a div with the id "empirespot". Your following calls to placeOnObject and slideToObject will only move or animate the first element with that id that they find, leaving the second div with a duplicate id in the same place.

You will need to add some unique string to the end of "empirespot" as part of your jstpl template. I usually add a counter variable for this.

[Buckwheat999]

I will give that a shot, thank you both of you for your feedback.

[Buckwheat999]

The decimal point isn't going to cause this behavior. There are multiple DOM elements with the same id. The second time you call playEmpireCardOnTable, there is already a div with the id "empirespot". Your following calls to placeOnObject and slideToObject will only move or animate the first element with that id that they find, leaving the second div with a duplicate id in the same place.

You will need to add some unique string to the end of "empirespot" as part of your jstpl template. I usually add a counter variable for this.

Hey thanks. You were right, that's exactly what it was doing. Your fix worked.! Thanks for helping me understand what was going on.