Can't get any coding for character sheet tabs to work :(

Heyo. First off: I'm not code-savvy. I can sort of patchwork things together, which is what I've been doing, but I have no formal education on the topic and I'm far from well versed in what I'm doing. BUT I cooked up a customized system for a game I'm running, wanted to consolidate all gameplay to a single program, so figured I should just suffer my way through figuring out a character sheet. To reiterate: I'm not using an existing system. I've borrowed the template from Adventurers Revised Edition as a starting point to work off of simply because it seemed the most straightforward for my needs, and I've been working on reshaping it for my stuff for the past several days. Really all I've been doing is shaving away the content I don't need, reformatting what I want, and using resources like this to, again, patchwork in any new content. I understand this is probably a bizarre way of doing things and I might make more code-efficient people cry, but it's what I have to work with and I'm okay with it not being super professional.  BUT I digress. I've actually been doing fairly okay with this strategy so far, but I've run into an issue and all my ideas for troubleshooting have gone nowhere, so I guess it's time to finally ask for help.  What I have: I feel fairly good about what I've accomplished, all things (including my incompetence) considered.  What I want: See those tabs in the middle of the sheet? I'd like them to operate, you know, like tabs. You should be able to glean just by looking what my intention is.  My problem: I've tried the tab code from Roll20's own resources . I've tried tab codes that Google gave me from W3Schools . Neither work. They don't work in the sheet preview and they don't work in-game. But the fucky part: they do  work in jsfiddle . (Both of those gifs, despite the aesthetic differences, are the exact same code being used.) What do I mean by them not working? They exist there as you see in the above screenshot, but clicking does nothing. All the tabs' contents are visible beneath, like one continuous page, instead of separated. It would be one thing if the code just didn't work at all, but the fact that it works elsewhere but not in Roll20's system has me scratching my head. I wonder if there's something else in my sheet's code that would interfere, but again, I'm not  a coder, so I don't really know where to look.  Any help would be deeply appreciated, since I can't find any relevant info or any existing known bugs or anything like that. I'm positive this is user error since I don't know what I'm doing, but again, no idea where to even look for the problem at this point. Assuming it'd be helpful, here's the HTML and CSS I have so far. And please--I'm sure it's a mess, I'm sure there are egregious ugly aspects to it; I'm not here to get roasted about my shoddy coding, and it's a work in progress that I haven't even attempted to refine yet, so please be civil lmao. Thanks in advance!!

One thing I notice is that you don't have all your scripts together in one section.  Try putting them together and see if the sheetworker tabs start operating for you. <script>     All your scripts must be in one batch here, generally at the very beginning or very end of your sheet code. </script>

Your picture is display, seeing that would help. What would be even more helpful, essential in fact, is seeing the html and css you are trying to get tabs to work. Specifically just that. You cant expect people to look through your entire sheet code - post what isnt working, and ask for help with that. (Edit: having looked through more of the sheet this was one instance where it was handy to see the full thing.)&nbsp;That said, I'm scanning it now and notice a few things, some minor, some breaking. A minor error: &lt;script type="text/worker"&gt; const strengthValues = ["1","2","3","4","5"]; strengthValues.forEach(function(value) { on(`clicked:strength_${value}`, function() { setAttrs({ "strength": value }); }); }); &lt;/script&gt; &lt;script type="text/worker"&gt; const strengthValues = ["1","2","3","4","5"]; strengthValues.forEach(function(value) { on(`clicked:strength_${value}`, function() { setAttrs({ "strength": value }); }); }); &lt;/script&gt; The above is an understandable mistake, but it can cause errors. Standard practice is to put all your sheet workers in one script block, either at the beginning or end of your sheet, like so &lt;script type="text/worker"&gt; const strengthValues = ["1","2","3","4","5"]; strengthValues.forEach(function(value) { on(`clicked:strength_${value}`, function() { setAttrs({ "strength": value }); }); }); const strengthValues = ["1","2","3","4","5"]; strengthValues.forEach(function(value) { on(`clicked:strength_${value}`, function() { setAttrs({ "strength": value }); }); }); &lt;/script&gt; Aaand I've just noticed you have two copies of the same sheet worker. Hmmm. Back to the specific issue of tabs: roll20 uses a limited version of HTML. Stuff that works in jsfiddle or on external sites often wont work here. Specifically you cannot use ids on sheets, and you cant use onclick events like here (or any javascript outside the specific limited from allowed in sheet workers): &lt;div class="tab"&gt; &lt;button class="tablinks" onclick="openCity(event, 'Character')" id="defaultOpen"&gt;Character&lt;/button&gt; &lt;button class="tablinks" onclick="openCity(event, 'Traits')"&gt;Traits&lt;/button&gt; &lt;button class="tablinks" onclick="openCity(event, 'Spells')"&gt;Spells&lt;/button&gt; &lt;button class="tablinks" onclick="openCity(event, 'Inventory')"&gt;Inventory&lt;/button&gt; &lt;button class="tablinks" onclick="openCity(event, 'Journal')"&gt;Journal&lt;/button&gt; &lt;/div&gt; &lt;div id="Character" class="tabcontent"&gt; None of the above will work, and neither will this: &lt;script&gt; function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i &lt; tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i &lt; tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; } // Get the element with id="defaultOpen" and click on it document.getElementById("defaultOpen").click(); &lt;/script&gt; Finally, you do not use head or body sections, nor css style sections, within the html file. - notice the adventurers sheet you copied does not have them. It also does have a working implementation of tabs. For reasons like these, you cannot test character sheets on sites outside of roll20 - there are too many differences. You have to build and test them specifically in the roll20 environment. I encourage you to look over this page for more information on how to get started:&nbsp; <a href="https://wiki.roll20.net/Building_Character_Sheets" rel="nofollow">https://wiki.roll20.net/Building_Character_Sheets</a> You have a lot of stuff to strip out your existing sheet, and that adventurers sheet you started from looks like a decent thing to examine when doing so.

Kraynic said: GiGs said: Eyy!! Thank you both so much!! I got it working now. I apologize, I knew it was gonna be kind of a mess I was presenting you with, but yeah--I definitely don't know what I'm doing haha.&nbsp;&nbsp; I do have one last question: is there a way to style those tab buttons? They definitely don't match the rest of the visuals, and I'd absolutely love it if I could somehow insert an image instead of the text, but when I replace that display text with an &lt;img src="url"&gt;, it doesn't show up with anything, so I'm assuming that won't do the trick. Is it possible? Either way, thanks again!