Issues With Tabs

Hi! I'm having issues setting up tabs on the sheet I'm making. Basically, nothing happens when I click the buttons for tab changing. The value of the input field doesn't even change. Here's the pertinent code:  <input class="tabstoggle" name="attr_sheetTab" value="main" /> <button type="action" class"button0" name="act_main">Main</button> <button type="action" class"button1" name="act_traits">Traits, Spells, and Boosts</button> <button type="action" class"button2" name="act_story">Backstory</button> <div class="main">      //main sheet here <div class="traits">     //traits sheet here </div> <div class="story">     //backstory sheet here </div> <script type="text>/worker">     const buttonlist = ["main", "traits", "story"];     buttonlist.forEach(button => {         on("clicked:${button}", function() {             setAttrs({                 sheetTab: button             });         });     }); </script> CSS:  .charsheet .main,  .charsheet .traits,  .charsheet .story{     display: none; } .charsheet .tabstoggle[value=main]~ div.button0 {outline: 2px solid green;} .charsheet .tabstoggle[value=traits]~ div.button1 {outline: 2px solid green;} .charsheet .tabstoggle[value=story]~ div.button2 {outline: 2px solid green;} .charsheet .tabstoggle[value=main] ~ div.main{     display: block; } .charsheet .tabstoggle[value=traits] ~ div.traits{     display: block; } .charsheet .tabstoggle[value=story] ~ div.story{     display: block; }

Just realized there was a minor typo in  "text/worker". Gah. 

Something else is wrong. Still not working. 

Can you post your code with the typo fixed so we can make sure we aren't commenting on things you've already fixed?

ah! I see the issue actually. You need to use template literals for the listener declaration, not strings. This: on("clicked:${button}", function() { should be: on(`clicked:${button}`, function() { Note the backticks instead of quotes. This denotes a template literal in javascript which allows the fancy interpolation syntax for calling a variable in a string.

I'd also change your css to be a bit more streamlined: .charsheet .tabstoggle[value=main]~ div.button0 {outline: 2px solid green;} .charsheet .tabstoggle[value=traits]~ div.button1 {outline: 2px solid green;} .charsheet .tabstoggle[value=story]~ div.button2 {outline: 2px solid green;} .charsheet .tabstoggle:not([value=main]) ~ div.main, .charsheet .tabstoggle:not([value=traits]) ~ div.traits, .charsheet .tabstoggle:not([value=story]) ~ div.story{ /*Setting it to display none only if the value isn't right allows us to more easily manipulate the display value of the pages when they are displayed*/ display: none; } There were also some minor issues with the html. the main div wasn't closed In order for this technique to work, the input storing the active tab needs to be type="hidden" <input class="tabstoggle" name="attr_sheetTab" type="hidden" value="main" /> <button type="action" class"button0" name="act_main">Main</button> <button type="action" class"button1" name="act_traits">Traits, Spells, and Boosts</button> <button type="action" class"button2" name="act_story">Backstory</button> <div class="main"> main sheet here </div> <div class="traits"> traits sheet here </div> <div class="story"> backstory sheet here </div>

Thank you! 

Can you tell me why the buttons still aren't changing colors?  HTML:  <button type="action" class="button1" name="act_main">Main</button> <button type="action" class="button2" name="act_traits">Traits, Spells, and Boosts</button> <button type="action" class="button3" name="act_story">Backstory</button> CSS:  .charsheet .tabstoggle[value=main]~ div.button1 {outline: 2px solid red;} .charsheet .tabstoggle[value=traits]~ div.button2 {outline: 2px solid red;} .charsheet .tabstoggle[value=story]~ div.button3 {outline: 2px solid red;}

Just got it working. Not entirely sure how. 

in your original code, you had their class as class"button0"  instead of class="button0" .