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:


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

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)
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.


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.



Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.