Help with my tabs

I am trying to imbed multiple tabs into my sheet. I tried following the info at&nbsp; <a href="https://wiki.roll20.net/CSS_Wizardry#Tabs" rel="nofollow">https://wiki.roll20.net/CSS_Wizardry#Tabs</a> &nbsp;and couldn't get it to actually switch between tabs when clicked on. I even went as far as just copy-pasting the code there and still nothing. Any idea how to make this work? &lt;input type="hidden" class="sheet-tabstoggle" name="attr_sheetTab" value="character" /&gt; &lt;div&gt; &lt;button type="action" name="act_character" &gt;Character&lt;/button&gt; &lt;button type="action" name="act_journal" &gt;Journal&lt;/button&gt; &lt;button type="action" name="act_configuration" &gt;Configuration&lt;/button&gt; &lt;/div&gt; &lt;div class="sheet-character"&gt; &lt;h2&gt;Character&lt;/h2&gt; &lt;span&gt;character Stuff Goes here &lt;/span&gt; &lt;/div&gt; &lt;div class="sheet-journal"&gt; &lt;h2&gt;Journal/Notes&lt;/h2&gt; &lt;span&gt;Journal/Notes Stuff Goes here&lt;/span&gt; &lt;/div&gt; &lt;div class="sheet-config"&gt; &lt;h2&gt;Config/Settings&lt;/h2&gt; &lt;span&gt;Sheet Config/Settings goes here&lt;/span&gt; &lt;/div&gt; &lt;script type="text/worker"&gt; const buttonlist = ["character","journal","configuration"]; buttonlist.forEach(button =&gt; { on("clicked:${button}", function() { setAttrs({ sheetTab: button }); }); }); &lt;/script&gt; /*Configure the tab buttons*/ .charsheet .sheet-character, .charsheet .sheet-config, .charsheet .sheet-journal { display: none; } /* show the selected tab */ .charsheet .sheet-tabstoggle[value="character"] ~ div.sheet-character, .charsheet .sheet-tabstoggle[value="configuration"] ~ div.sheet-config, .charsheet .sheet-tabstoggle[value="journal"] ~ div.sheet-journal { display: block; }

Try changing on("clicked:${button}", function() { To on(`clicked:${button}`, function() { Ie backticks instead of quotes.&nbsp; "${button}" is a template literal which needs the backticks. <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals</a> On my phone.&nbsp; Can't test.&nbsp; But that may be the issue.

That was definitely a &nbsp;problem, but unfortunately, it did not resolve the issue.&nbsp;

Looks like the .forEach line/function may have been missing parenthesis. Try this; &lt;script type="text/worker"&gt; const buttonlist = ["character", "journal", "configuration"]; buttonlist.forEach((button) =&gt; { on(`clicked:${button}`, function () { setAttrs({ sheetTab: button, }); }); }); &lt;/script&gt;

The parentheses shouldn't matter there, vInce. You only need parentheses when you are enclousing an operation of some sort, like building a string. You shouldn't have a comma there, either - never put a comma at the LAST entry inside sheetTab: setAttrs({ sheetTab: button, }); To Trevor: vInce's first correction (swapping quotes for backticks) should fix the issue. It works perfectly for me. Can you describe what you are seeing, and what you should see?

Btw, with my love of compact code, I'd change this: /*Configure the tab buttons*/ .charsheet .sheet-character, .charsheet .sheet-config, .charsheet .sheet-journal { display: none; } /* show the selected tab */ .charsheet .sheet-tabstoggle[value="character"] ~ div.sheet-character, .charsheet .sheet-tabstoggle[value="configuration"] ~ div.sheet-config, .charsheet .sheet-tabstoggle[value="journal"] ~ div.sheet-journal { display: block; } to this /*Configure the tab buttons*/ /* show the selected tab */ .charsheet .sheet-tabstoggle:not([value="character"]) ~ div.sheet-character, .charsheet .sheet-tabstoggle:not([value="configuration"]) ~ div.sheet-config, .charsheet .sheet-tabstoggle:not([value="journal"]) ~ div.sheet-journal { display: none; } Both do exactly the same, but one is more compact and requires fewer alterations if you later change the tabs. It takes into account the default for a div is already display: block, and that's what it is set as if you don't change anything.

You know what, I guess that did fix it. The tabs weren't changing. I ended up clearing my cache (for something completely unrelated) and when I went back here it was working.

Thanks everyone!

GiGs said: The parentheses shouldn't matter there, vInce. You only need parentheses when you are enclousing an operation of some sort, like building a string. You shouldn't have a comma there, either - never put a comma at the LAST entry inside sheetTab: setAttrs({ sheetTab: button, }); The extra comma is something eslint seems to want/like...&nbsp; Respectfully: ( trailing commas ) I've gotten in the habit of adding it and it doesn't "seem" to have broken anything.&nbsp; (yet) ;-P

There are some places you can use them and it won't matter (typical javascript objects, for example, and all the examples posted except setAttrs). But in setAttrs and in JSON files, it'll create a crash and you'll regret it. setAttrs (unless something has changed) seems to follow strict JSON rules - they are JavaScript objects in most ways, but crash the way JSON objects do. Edit: I had to test it, and a very quick test suggests setAttrs does now support trailing commas in at least some cases. I'll have to do more testing. It didn't used to, but at some point this may have changed. I w3onder if there's a different behaviour between legacy and CSE sheets, or if it has been fixed for both. Edit 2: looks like it's been fixed for both. I'm sure I've given advice not to do this on my blog - I'll have to update that. Thanks vInce, I wasnt aware of this.

the only place the trailing comma should matter is in JSON files because that's a specification of JSON. For actual JS objects, the comma won't matter (even in setAttrs).

Yes, it shouldn't matter, but it used to and always struck me as weird. Now it doesn't, which is good.