Im having two absolutely identical buttons on a page.
Why? – I’m using WordPress, and I need a button that is generated by a plugin to be on a certain spot, so I copied the HTML of the button and placed it in that spot, and I hid the original button with "display:none".
What’s the problem?
On mobile the function of the button doesn’t work, but it does on PC.
The question – can that duplicated ID be the problem, even tho the original button is hidden?
At the moment I’m a bit clueless how to fix that because I don’t want to touch the plugin’s code, and If I change the ID of the button, the function probably wont work.
3
Answers
Yes, having two buttons with the same ID on a single page can cause problems. ID should be unique.
if you use document.getElementById() it will only return very first button not all of them
Yes, having two identical buttons with the same ID on a page can cause issues, even if one of them is hidden. IDs should always be unique on a page to ensure that your HTML is valid and that JavaScript functions as expected.
When you duplicate the HTML of the button and place it in a different location on the page, you should also change the ID of the duplicate button to something unique. You can also update any JavaScript or CSS that references the original button ID to point to the new unique ID.
If you don’t want to modify the plugin’s code, you can try using a class instead of an ID to style and position the button. This will allow you to have multiple buttons with the same class name without causing conflicts. However, you’ll still need to ensure that any JavaScript that interacts with the button uses the correct class name.
In any case, it’s important to have unique IDs on your page to avoid issues like the one you’re experiencing.
in general it is a problem . because ID means that it should be unique . you should use class instead and the idea why it’s not working I strongly believe it’s because you are accesing this buitton through getElementByID and maybe you are getting hiding button always . so let’s check in javascritp if the button which you got , is hidden or not before you will do any interaction . I hope it will help you .