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

TABS on Character Sheet Help (Used the Wiki page and still having issues)

The button will not switch to cybergear tab when selected. Please help. Below is the code. HTML: <div>     <button type="action" name="act_character" >CHARACTER</button>     <button type="action" name="act_CYBERGEAR" >CYBERGEAR</button> </div> <input type='hidden' class='sheet-tabstoggle' name='attr_sheetTab'  value='character'  /> <div class='sheet-character'>     <h2>Character</h2>     <span> (CHARACTER SHEET INFO) </span> <div class='sheet-CYBERGEAR'>     <h2>CYBERGEAR</h2>     <span> (CYBERGEAR TAB INFORMATION) </span> <script type="text/worker">     const buttonlist = ["character","CYBERGEAR"];     buttonlist.forEach(button => {         on(`clicked:${button}`, function() {             setAttrs({                 sheetTab: button             });         });     }); </script> CSS: /*Configure the tab buttons*/ .sheet-character, .sheet-CYBERGEAR { display: none; } /* show the selected tab */ .sheet-tabstoggle[value="character"] ~ div.sheet-character, .sheet-tabstoggle[value="CYBERGEAR"] ~ div.sheet-CYBERGEAR { display: block; }
1597506733

Edited 1597506746
Andreas J.
Forum Champion
Sheet Author
Translator
To be on the safe side, and for consistency's sake, maybe "CYBERGEAR" to "cybergear" in all places of the code. It's plausible that could be the cause. In your example, you don't have a closing div tag on the two pages, but assume you have in the full code. Otherwise, just read through the documentation for buttons, sheetworkers if there are known pitfall or limitations that might be in play.
1597509778
GiGs
Pro
Sheet Author
API Scripter
The reason the uppercase name could be the problem is because attributes mentioned on the line below must always be in lower case:   on(`clicked:${button}`, function() { Youre passing an uppercase button name to it, so it wont be detected. You can catch this error by coercing into lower case, like so:   on(`clicked:${button.toLowerCase()}`, function() { but it's better to just use lower case attribute and button names.
1597512713
Andreas J.
Forum Champion
Sheet Author
Translator
Things like this is why I do lowercase names...
1597514184
GiGs
Pro
Sheet Author
API Scripter
📜🗡Andreas J.🏹📜 said: Things like this is why I do lowercase names... Honestly, I still use mixed case names, and I should know better! Some habits are hard to break (plus I know how to deal with them, but really, I should use lower case everywhere).
That was the ticket. Thank you so much. After looking at this many lines it seems the simple things cause the most issues.