Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

[HELP] Character Sheet Tabs Setup Not Working

1618930387

Edited 1618931087
So I'm designing my own TTRPG system and I want to make a character sheet for it in Roll20. I'm not a programmer yet, so I'm just stumbling around copying and pasting things because I'm told they'll work, but I think I messed something up. I've managed to get a swapping area so that users can easily make a PC sheet or an NPC sheet, but I can't make the PC sheet's tab system work. I have: HTML  <h2 align="center">Player Sheet</h2>     <div class="spacer"></div>     <div>       <button type="action" name="act_stats">Stats</button>       <button type="action" name="act_perks">Perks</button>       <button type="action" name="act_actionss">Actions</button>       <button type="action" name="act_inventory">Inventory</button>       <button type="action" name="act_notes">Notes</button>       <button type="action" name="act_options">Options</button>     </div>     <input type="hidden" class="sheet-tabstoggle" name="attr_sheettab" />     <div class="spacer"></div>     <div class="sheet-stats">       <h3 align="center">Stats</h3>     </div>     <div class="sheet-perks">       <h3 align="center">Perks</h3>     </div>     <div class="sheet-actions">       <h3 align="center">Actions</h3>     </div>     <div class="sheet-inventory">       <h3 align="center">Inventory</h3>     </div>     <div class="sheet-notes">       <h3 align="center">Notes</h3>     </div>     <div class="sheet-options">       <h3 align="center">Options</h3>     </div> <script type="text/worker">   const buttonlist = ["stats","perks","actions","inventory","notes","options"];   buttonlist.forEach(button => {     on('clicked:${button}', function() {       setAttrs({         sheettab: button       });     });   }); </script> CSS .sheet-stats, .sheet-perks, .sheet-actions, .sheet-inventory, .sheet-notes, .sheet-options {     display: none; } .sheet-tabstoggle[value="stats"] ~ div.sheet-stats, .sheet-tabstoggle[value="perks"] ~ div.sheet-perks, .sheet-tabstoggle[value="actions"] ~ div.sheet-actions, .sheet-tabstoggle[value="inventory"] ~ div.sheet-inventory, .sheet-tabstoggle[value="notes"] ~ div.sheet-notes, .sheet-tabstoggle[value="options"] ~ div.sheet-options {     display: block; } The problem seems to be with the sheetworker, since the character sheet's Attributes section doesn't list a "sheettab" attribute after I've clicked a button. I noticed that there was no "getAttrs" section of the sheetworker, but I assumed that that was because there isn't an attribute to get until a button is clicked. Apologies for the lack of program font or any other post-styling irregularities, and thank you in advance for your help! :D
1618933467
Finderski
Pro
Sheet Author
Compendium Curator
Try changing this:  on('clicked:${button}' To this:  on(`clicked:${button}` The difference is the in your code you're using "straight quotes" instead of the "backtick" which is what you need to use for the variable (${button}) to actually work.   There may be other issues, but that's the most obvious to me at the moment.  In case you're wondering where to find the backtick, on an English keyboard, it's to the left of the left of the number 1 (same key as the ~).
Thank you so much! I'm legally blind, so there are some marks that can be subtler than my eyes can pick up on. I was able to see the difference once I edited the files in Notepad++, though. I also figured out that the code doesn't want you defining an attirbute with a value of "actions," so that's handy.
1618956254
Andreas J.
Forum Champion
Sheet Author
Translator
backticks are used in JS when template literals are used in strings or code (the ${stuff}-format). <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>
Oh, that looks like it'll be a super-useful resource. Thanks, Andreas! :D