multiple elements having same id

[Ajayneethikannan]

Nature of issue?

• [x] Existing feature enhancement

Most appropriate sub-area of p5.js?

• [x] Core/Environment/Rendering

Which platform were you using when you encountered this?

• [x] Mobile/Tablet (touch devices)
• [x] Desktop/Laptop
• [x] Others (specify if possible) - independent of device

Details about the bug:

• p5.js version: 0.7.3
• Web browser and version: Google Chrome : 72.0.3626.96 (Official Build) (64-bit)
• Operating System: Ubuntu 16.04
• Steps to reproduce this:

  This example sketch can be used to see that p5 allows people to change the ids of multiple elements to be the same. https://editor.p5js.org/TheSkepticSniper/sketches/PGRAjeMy1

  Feature enhancement details:

  Hello! Currently the id function in p5.Element.js allows users to change id of several elements to the same id. Though having multiple elements with the same Id does not raise errors in the browser, it is not preferable to have it so. Also using classes is a better approach for such an use case. Since it is not wrong to have multiple elements with the same id, I believe we should also not stop the user from having multiple elements with the same id. Since we can select only one element with the given id, by using the inbuilt function document.getElementById, and also the select method defined in p5.js, this can lead to some undefined behavior too.

New feature details:

For this issue, the changes will be made in the id function defined in the p5.Element.js module The changes:

• Raising a simple warning, with a helpful message for beginners in the console if there is already an element, existing with the id we are providing in the argument.

[lmccart]

I like this warning idea and we're currently thinking about adding some functionality for Friendly Error System that checks the logic of arguments passed in. That's a longer term effort. For now, a good fix might be to add some info to the documentation recommending that only one element have a particular id per sketch, and directing users to look at class() instead.

[lmccart]

resolved with #3534