FYI - Don´t use # in element ids

[David Kühn]

Hey,

I just had an interesting bug - I fixed it, but thought I could share it with you (and maybe someone will find this post, when struggeling with the same issue.

My game Kingscraft (already in beta) has someone working on a tutorial right now. And he couldn´t attach a infobox / Tutorial box to one of the elements. I always gave the error: "BGA Service Error".

The element was a token for an action that every player has. To differenciate the ids of the tokens between playes for the tooltips, I have put the player-color as hex-code in the id-string. Like "#b0697b". And that seems to have been the issue. BGA didn´t like the #-symbol, it seems. After removing the "#" from the string, it worked fine.

I hope this will help someone not get crazy, when having the same issue.

Best,
David

[thoun]

I don't think it's a good practice at all, since # is the special charachter to find by id in a querySelector

[Fearinn]

I don't think the issue is limited to "#". I use other symbols to separate "arguments" in the elements' ids (":" or "$") and they caused the same error. I guess there's some kind of alphanum check rejecting most symbols (maybe hyphens and underscores are allowed).

[jordijansen]

I don't think the issue is limited to "#". I use other symbols to separate "arguments" in the elements' ids (":" or "$") and they caused the same error. I guess there's some kind of alphanum check rejecting most symbols (maybe hyphens and underscores are allowed).

Then your still abusing the id field. If you need to add data to a html element use the data-* attributes.

[Fearinn]

I don't think the issue is limited to "#". I use other symbols to separate "arguments" in the elements' ids (":" or "$") and they caused the same error. I guess there's some kind of alphanum check rejecting most symbols (maybe hyphens and underscores are allowed).

Then your still abusing the id field. If you need to add data to a html element use the data-* attributes.

Different elements require different ids. What I called an "argument" is just a modifier to distinguish two or more ids (eg., "card-1" and "card-2"). Although hyphens and underscores are much more common, other symbols are not invalid HTML. Data attributes are not relevant for this matter.

Of course, it's not a huge problem, but, since devs are not informed about it by the docs, the forementioned error is not rare. I opened a bug report: https://studio.boardgamearena.com/bug?id=174

[quietmint]

Follow MDN's recommendations and choose simple HTML IDs that are also valid identifiers in CSS and JavaScript to avoid any issues about escaping, etc.
* Only use ASCII letters, numbers, hyphens (-), and underscores (_)
* Don't begin with a number or a hyphen
* Don't use multiple IDs that differ only in capitalization

https://developer.mozilla.org/en-US/doc ... ributes/id
https://developer.mozilla.org/en-US/docs/Web/CSS/ident
https://developer.mozilla.org/en-US/doc ... Element/id