Hide/Show Hit point markers? - HELP?

So I'm working on creating a custom sheet which has "Hitpoint" markers (icons). A character can only have a max of 10 and right now it shows all 10 by default, but I would like it so that when I change the value of the hitpoints it "hides" excess markers. I do have console.log statements in the worker script, and I do see it getting set. I even retrieve the value after setting, and it is returning the proper "hideme" values, but they are not "hiding".  If I do manually set the input value (in the browser) during live session, it does hide the icon so I know the CSS is working. This is what it currently shows: This is what I would like it to show once I enter in a value of 5. Source HTML: <div class="sheet-hitpoints"> <div class="sheet-radiobutton-tracker"> <input type="checkbox" class="sheet-life" name="attr_bodyHits0" value="showme0" /><label for="attr_bodyHits0"></label> <input type="checkbox" class="sheet-life" name="attr_bodyHits1" value="showme1" /><label for="attr_bodyHits1"></label> <input type="checkbox" class="sheet-life" name="attr_bodyHits2" value="showme2" /><label for="attr_bodyHits2"></label> <input type="checkbox" class="sheet-life" name="attr_bodyHits3" value="showme3" /><label for="attr_bodyHits3"></label> <input type="checkbox" class="sheet-life" name="attr_bodyHits4" value="showme4" /><label for="attr_bodyHits4"></label> <input type="checkbox" class="sheet-life" name="attr_bodyHits5" value="showme5" /><label for="attr_bodyHits5"></label> <input type="checkbox" class="sheet-life" name="attr_bodyHits6" value="showme6" /><label for="attr_bodyHits6"></label> <input type="checkbox" class="sheet-life" name="attr_bodyHits7" value="showme7" /><label for="attr_bodyHits7"></label> <input type="checkbox" class="sheet-life" name="attr_bodyHits8" value="showme8" /><label for="attr_bodyHits8"></label> <input type="checkbox" class="sheet-life" name="attr_bodyHits9" value="showme9" /><label for="attr_bodyHits9"></label> </div> </div> Source CSS: (when I manually set the input.values it does hide/show them. .sheet-hitpoints .sheet-radiobutton-tracker input[value^="showme"] + label { display: inline-block; } .sheet-hitpoints .sheet-radiobutton-tracker input[value^="hideme"] + label { display: none; } Worker Script: on("change:hitpoints ", function(eventInfo) { let hpValue = eventInfo.newValue; let index = 0; hitPointIcons.forEach(iconName => { if (index++ < hpValue) { setAttrs({ iconName: "showme" }); } else { setAttrs({ iconName: "hideme" }); } }); });

Before figuring out a solution, I'll point out that for efficiency reasons you want to keep the number of setAttrs functions in a worker to the minimum: usually one. You do this by setting a variable, like so const attributes = {} then add your attributes to it like so attributes['iconName'] = "showme"; then at the end of your function, just do one setAttrs like so setAttrs(attributes); In explaining this, I see why your worker isnt working. In your setAttrs you just set one attribute iconName , but none of your attributes have that name. Your forEach function isnt set up correctly - you need an array for it to loop through, and there isnt one. You havent defined hitPointIcons within the worker. Honestly for this function, an old style for loop is probably best on("change:hitpoints", function(eventInfo) {     let hpValue = parseInt(eventInfo.newValue) || 0;     const attributes = {};     for(let n = 0; n <= 9; n++) {         if ( n < hpValue) {             attributes['bodyHits' + n] = 1;         } else {             attributes['bodyHits' + n] = 0;         }     }     setAttrs(attributes); }); You can also write the if statement in more condensed form on("change:hitpoints", function(eventInfo) {     let hpValue = parseInt(eventInfo.newValue) || 0;     const attributes = {};     for(let n = 0; n <= 9; n++) {         attributes['bodyHits' + n] = (n < hpValue) ? 1 : 0;     }     setAttrs(attributes); }); By the way, that  n  <  hpValue might need to be n  <=  hpValue . A warning: if you ever plan to use an API script to change hitpoints, there is a bug with eventinfo.newValue, and you are better off using getAttrs. That would look like on("change:hitpoints", function(eventInfo) {     getAttrs(['hitpoints'], function(values) {         let hpValue = parseInt(values.hitpoints) || 0;         const attributes = {};         for(let n = 0; n <= 9; n++) {             attributes['bodyHits' + n] = (n < hpValue) ? 1 : 0;         }         setAttrs(attributes);     });     });

Note: if you wanted to use forEach instead of the for loop you could do [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].forEach (iconNumber => {     attributes['bodyHits' + n] = (iconNumber < hpValue) ? 1 : 0; });

Thanks a lot for the reply!  I changed it to your example, and it seems to run fine, but still not getting the results.  It appears to not be setting the HTML input values so the styling does not take effect? (See images bottom). HTML(fixed attr_ names so start 1-10. <div class="sheet-radiobutton-tracker"> <input type="checkbox" class="sheet-life" id="attr_bodyHits0" name="attr_bodyHits0" value="1" /><label for="attr_bodyHits0"></label> <input type="checkbox" class="sheet-life" id="attr_bodyHits1" name="attr_bodyHits1" value="2" /><label for="attr_bodyHits1"></label> <input type="checkbox" class="sheet-life" id="attr_bodyHits2" name="attr_bodyHits2" value="3" /><label for="attr_bodyHits2"></label> <input type="checkbox" class="sheet-life" id="attr_bodyHits3" name="attr_bodyHits3" value="4" /><label for="attr_bodyHits3"></label> <input type="checkbox" class="sheet-life" id="attr_bodyHits4" name="attr_bodyHits4" value="5" /><label for="attr_bodyHits4"></label> <input type="checkbox" class="sheet-life" id="attr_bodyHits5" name="attr_bodyHits5" value="6" /><label for="attr_bodyHits5"></label> <input type="checkbox" class="sheet-life" id="attr_bodyHits6" name="attr_bodyHits6" value="7" /><label for="attr_bodyHits6"></label> <input type="checkbox" class="sheet-life" id="attr_bodyHits7" name="attr_bodyHits7" value="8" /><label for="attr_bodyHits7"></label> <input type="checkbox" class="sheet-life" id="attr_bodyHits8" name="attr_bodyHits8" value="9" /><label for="attr_bodyHits8"></label> <input type="checkbox" class="sheet-life" id="attr_bodyHits9" name="attr_bodyHits9" value="0" /><label for="attr_bodyHits9"></label> </div> CSS: .sheet-hitpoints .sheet-radiobutton-tracker input[value^="showme"] + label { display: inline-block; } .sheet-hitpoints .sheet-radiobutton-tracker input[value^="hideme"] + label { display: none; } Worker Script: (with some logging). on("change:hitpoints", function(eventInfo) { getAttrs(['hitpoints'], function(values) { let hpValue = parseInt(values.hitpoints) || 0; const attributes = {}; for(let n = 1; n <= 10; n++) { attributes['bodyHits' + n] = (n <= hpValue) ? "showme" : "hideme"; } console.log("Hit points changed to:" + hpValue); console.log(attributes); setAttrs(attributes); }); }); Browser Live session after save

In changing your n =1 to 10, the attribute names dont match, since your attributes still end with 0-9. That's not the issue here though. The attributes are being set. You can check this by looking for them in the attributes and abilities tab. The problem is with the HTML and the CSS, not the sheet worker. Firstly, though it's not relevant to this problem, in your html you have a bunch of ids. They aren't legal on roll20, so you should remove them all.  You said earlier that when you manually changed the input values, the proper behaviour was seen. But in my testing, I'm not seeing that, and also dont understand how it could work, since the checkbox shown doesnt set a value of "showme" or "hideme" - it sets a value of a number from 1 to 10 when checked or zero.  Also the last input has this name="attr_bodyHits9" value="0" value="0" is not a valid value on a checkbox - because 0 is the value it has when unchecked. I'm not sure how to fix your html/css, and keep your design, since I'm only seeing part of the picture here.