jquery issue with dynamicaly selected elements

i am making a game, and im trying to display healthLost on whichever javascript object lost that health. here is the relevant part of my objects code for player

function Player(id) {
this.id = id;
this.displayText = "<img src = 'http://3.bp.blogspot.com/-kAhN0HX-MBk/T_5bApfhbJI/AAAAAAAAAuI/lUww8xT9yV8/s1600/smileys_001_01.png'" +
    "class='onTop' id='" + this.id + "' alt='you' border='0' />" +
    "<div id = '" + this.id + "health' class = 'healthLost hide'></div>";}

and for monsters ( a array of objects)

function createMonster(name,startingPoint,level) {
    this.id = "monsters[" + monsterIdPlacholder++ + "]";
    this.displayText = "<img src='http://4.bp.blogspot.com/-wo6VrFt3ER4/UOq47YphNUI/AAAAAAAACCY/e-JnxNYzyWQ/s1600/712324538.png'" +
    "alt='bad guy' border='0' id = '" + this.id + "' />" +
    "<div id = '" + this.id + "health' class = 'healthLost hide'></div>";
}

CSS for hide:

.hide{
    display:none;
}

and in my function attack() i wrote like this

function attack( attacker, defender ) {

    //code to calculate healthLost

    var displayHealthDivId = defender.id + "health";  

    console.log( displayHealthDivId  ); 

    console.log( defender.displayText  );   

        $( "#" + displayHealthDivId ).removeClass("hide");
            $( "#" + displayHealthDivId ).html( healthLost );

        });
    }
}

now the above jquery works for my player object, but not for my monster object's, the console.log returns the following

playerhealth
adventure.js (line 240)
<img src = 'http://3.bp.blogspot.com/-kAhN0HX-MBk/T_5bApfhbJI/AAAAAAAAAuI/lUww8xT9yV8/s1600/smileys_001_01.png'class='onTop' id='player' alt='you' border='0' /><div id = 'playerhealth' class = 'healthLost hide'></div>
adventure.js (line 242)
monsters[0]health
adventure.js (line 240)
<img src='http://4.bp.blogspot.com/-wo6VrFt3ER4/UOq47YphNUI/AAAAAAAACCY/e-JnxNYzyWQ/s1600/712324538.png'alt='bad guy' border='0' id = 'monsters[0]' /><div id = 'monsters[0]health' class = 'healthLost hide'></div>

so why doesnt it work for the monsters? and how do i fix this?

what i really want is for the divs to appear then fade upwards, but i will do that later. however if you could include that in your answer tthat would be neat.

link here

sorry i wasent able to create a fiddle, too much code, and bugs (reference-error's since i didnt put in all my code) kept coming up.

--edit--

i found a workaround however i still dont know whats wrong with above code if you notice something please tell me, however above link will not demonstrate my issue anymore.

Answers:

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.