CODEWITHSUNDEEP
javascriptjqueryhtml
Benjadahl
Benjadahl

Reputation: 80

Refering to a HTML ID with mutliple variables

So, I am trying to create a game with blocks in the level being send from the server.

I have loop cycling through the blocks each time it recieves an update from the server. It will then if the block is solid, append the block to the html document if it is not already existing. 

if(blocks[blockCount].solid === true){
            if($("#" + blocks[blockCount].posX.toString() + "," + blocks[blockCount].posY.toString()).length > 0){
               alert("Block already exists");
            }else{
                $("body").append("<div style='height: " + blockSize + "px;width:  " + blockSize + "px;background-color: blue;position: absolute;display: inline;margin-left: " + blocks[blockCount].posX * blockSize + "px;margin-top: " + blocks[blockCount].posY * blockSize + "px;' id='" + blocks[blockCount].posX.toString() + "," + blocks[blockCount].posY.toString() + "'> </div>");
            }
        }

blocks[blockCount].posX and Y should both equal to 4. But for some reason they keep being created, the if statement does for some reason not work. Can you please explain me why? or post the correct code. Thanks a lot for your help. :)

I learned here: How to check if element exists in the visible DOM?

that the jquery .length would allow me to see if the element already existed.

Upvotes: 2

Views: 58

Answers (2)

Jaromanda X
Jaromanda X

Reputation: 1

You can't have a , in an ID (or class for that matter) [see comment, you can, but why make life hard for yourself] - because a , is used as a separator in CSS .. i.e

#id1,div would select an element with id="id1" AND any div

you're creating elements with id's like "123,456" - which as a CSS selector would be #123,456

solution: try using _ instead of ,

also, I'm not sure if an id is allowed to begin with numbers, but don't quite me on that, if not, just prepend your id's with x or whatever

note: the HTML5 spec allows ID's to begin with numbers, however, that too does not work in CSS selectors (for CSS at least, not tested with jQuery or querySelector[All] )

you'll end up with id's like x123_456 - which is OK

Upvotes: 4

Michał Dudak
Michał Dudak

Reputation: 5048

Since , has a special meaning in CSS, you'd have to escape in in your selector. To write a CSS selector targeting an element with id="foo,bar", you have to write #foo\,bar. In jQuery selector allow you to do the same, but you need to remember about JS syntax and write $("#foo\\,bar") to achieve what you want (the first backslash is to escape the second one in JS string).

Also, as Jaromanda X pointed out, IDs can't start with numbers so you'll have to prepend it with a letter.

To sum up, your code may look like this:

if(blocks[blockCount].solid === true){
    if($("#x" + blocks[blockCount].posX.toString() + "\\," + blocks[blockCount].posY.toString()).length > 0){
       alert("Block already exists");
    } else {
        $("body").append("<div style='height: " + blockSize + "px;width:  " + blockSize + "px;background-color: blue;position: absolute;display: inline;margin-left: " + blocks[blockCount].posX * blockSize + "px;margin-top: " + blocks[blockCount].posY * blockSize + "px;' id='x" + blocks[blockCount].posX.toString() + "," + blocks[blockCount].posY.toString() + "'> </div>");
    }
}

Upvotes: 1

Related Questions