I’m trying to create my own cookie consent box in the top of the page just so that it works perfectly with the theme, colours, etc. of my website. I was usin an external service till now, but, customising it was a problem.
So, I’ve 2 groups on each scene:
1: Header (id: header, class: sticky)
2: Group (this contains all the other elements of my webpage).
In the header group, there’s a button that sets a cookie and deleted the group from the page using this code:
var child = hypedocument.getElementById("header");
child.parentNode.removeChild(child);
The problem is, because it’s a cookie consent, it needs to be added in all scenes because I don’t know what’s the first scene a user might check. The user might get there by any link.
So, the code works as long as there is just one element with that ID, but, as soon as I add the same ID to the group on other scenes, I get uncaught error cannot read parent node property of null (something similar on those lines) in console and the element doesn’t get deleted. I searched for the error and found out that even if the same ID is on multiple pages, it won’t work. So, I tried by giving a unique ID and it worked.
So, my problem is, I have like 15 or so scenes and each has like 2 layouts. Giving different IDs to that element on each scene and layout will not just take time, but, also clutter my functions panel.
So, is there some workaround this? Like, doing it all in just 1 function or something?
P.S.: I’m using Advanced Export option to export each scene into its individual HTML file.