Sheet worker/ CSS to update roll button display when stat changes?

I've scrounged around for the answer for this one, and I feel like I'm close, but I know I'm missing a piece. The classes in Unity (by Modiphius) each have different resources.  Dreadnoughts have Fury, Priests have Faith, etc.  They retain and use them at varying increments, so in turn each class has a standardized "Recharge Die" that they may roll to regain their Resource at certain points.  Dreadnoughts roll d4, while Priests roll d6.  With the help of everyone here I have already worked up a nifty sheet worker that loads in a table of stats when you first pick a class on my original Unity sheet. It was not too tough for me to make that sheet worker store the recharge die and put it into the value of the recharge roll button.  So when you pick Dreadnought, you get the appropriate Resource name (Fury), the correct max amount of the resource (6), and a recharge roll button that rolls d4, etc.  This is good!  I also learned how to pseudo-style buttons in CSS so that I can make an appropriately styled d4 button appear - also good! Now... I want to be able to display the player's relevant die, and only that die, on their sheet.  To me it's just more visually appealing than reading "d6" or just clicking the d20.  From examples I've found this may be something where you display the d6 or d4 element if a checkbox or radio button is checked somewhere, but I have only really found this laid out plainly for something like Cycling Buttons in the wiki.  Not sure how to apply it to Roll Buttons, so I'm hoping someone can guide me in the right direction before I waste too much time on it.   Here's the script I'm working with, simplified for the relevant bits:   <div class="resource">          <button type="roll" name="roll_recharge" value="/roll @{recharge}"></button>                      <input type="text" name="attr_resourcetype" placeholder="Resource"/> <div>                      on("change:class sheet:opened", function () {     getAttrs(['class'], function(values) {         const classes = {             dreadnought: {resourcetype: "Fury (6)" , resource: 6, resource_max: 6, recharge: "d4",          driftwalker: {resourcetype: "Bile (8)" , resource: 8, resource_max: 8, recharge: "d6"},          judge: {resourcetype: "Fervor (6)", resource: 6, resource_max: 6, recharge: "d4"}     };  const classy = values.class;              if (!classes.hasOwnProperty( classy )) {            console.log("Error: The item " + classy + " is not found within the classes Object.");            return;         }          const metrics = classes[classy];         setAttrs(metrics);     }); }); Relevant CSS     .sheet-resource button[type=roll]::before {     font-family: dicefontd10;     content: "K";     font-size: 3em;     color: #a0a4e3;     background-color: transparent;     border: none;     line-height: 15px;     background-image: none;     text-shadow: none;     box-shadow: none;     font-weight: normal;     transition: 0.3s; } .sheet-resource button[type=roll]:hover::before {     color: #dbd879; } (Seems obvious that I would have to make a CSS element for all potential buttons.  The question is more over how I link them back to the class change.) Anything helps. Thanks!

Ordinarily, sheet workers aren't relevant for this, its done entirely within CSS.  But I'm not fully following what you're trying to do. It seems like the sheet worker handles individualising all the elements to class, so what remains to be hidden or shown?

Thanks for replying!  Okay, I'll try to distill my query a bit more:     I need to have the roll_recharge button change its font family and content on the event that attr_recharge is changed.     Right now I know how to change attributes based on other attributes, but I don't know how to link that attr_recharge change to a simultaneous change in the roll button CSS.     I was thinking I could do it with CSS attribute selectors but apparently that doesn't work out in Roll20.     I made some of the attempts outlined here with no luck ... I've kind of spun myself in circles trying to figure out how to apply it to roll buttons.

If I'm understanding what you're trying to do, then the type=hidden input controller should work. Try this html/css: HTML <div class="resource"> <input class='recharge-control' type='hidden' name='attr_recharge' value='d4'><!-- note the value for the hidden should be the same as the default for the actual recharge input --> <button class='recharge-display' type="roll" name="roll_recharge" value="/roll @{recharge}"></button>              <input type="text" name="attr_resourcetype" placeholder="Resource"/> <div> CSS .sheet-recharge-control[*="d4"] + .sheet-recharge-display{     font-family:"dicefontd4";/* and assuming your content on the :before pseudoelement is always set to "a" } Hope that helps

Hi Scott, thanks for the tip.  Unfortunately it's not yet doing the trick... I've tried a couple variations  and I'm unsure what's going wrong.  I stripped the code down to just this little bit and the "control + display" bit does not seem to let me modify the button at all. (I added a text field so I could change the recharge attribute manually.) Any ideas as to how I'm screwing it up?  <div class="resource">             <input class='recharge-control' type='hidden' name='attr_recharge' value='d4'>             <button class="recharge-display" type="roll" name="roll_recharge" value="/roll @{recharge}"></button>           <input type="text" name="attr_resourcetype" placeholder="Resource"/>                   <input type="text" name="attr_recharge" value='d4'/> </div>             .sheet-recharge-control[*="d4"] + .sheet-recharge-display {     font-family: dicefontd4; } .sheet-recharge-control[*="d6"] + .sheet-recharge-display {     font-family: dicefontd6; } .sheet-recharge-control[*="d8"] + .sheet-recharge-display {     font-family: dicefontd8; } .sheet-resource button[type="roll"]::before {     font-family: dicefontd4;     content: "a"; }

Scott, I found other examples where it was [value*="d4"] rather than [*="d4"].  Is that what you had intended? ...However I made that edit and still can't seem to produce the intended result... any other clues?

I don't think you need to include a wildcard *.  Maybe try [value="d4"]

Doh, yes. I apparently was asleep at the coding keyboard. You do have to specify which property you're checking And the wild card isn't needed, but would allow you to handle xd4 with a single CSS declaration instead of one for 2d4, 1d4, and etc.

Scott was "sleep coding" again...  ;-P