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

Fill Radio Buttons to the Left but stop at 20 when I need 40

1594603256

Edited 1594603358
SᵃᵛᵃǤᵉ
Sheet Author
API Scripter
I am building my own version of the Battletech: a Time of War sheet I need 40 fill radio buttons but the current set I have stops at 20 and I cannot figure out why. I also need a second set of 40. input.sheet-dot[value="19"] ~ button.sheet-gt-19 > span.sheet-checked { display: none; } input.sheet-dot[value="20"] ~ button.sheet-gt-20 > span.sheet-checked { display: none; } input.sheet-dot[value="21"] ~ button.sheet-gt-21 > span.sheet-checked { display: none; } <button type="action" name="act_stdam_19" class="dot gt-1 gt-2 gt-3 gt-4 gt-5 gt-6 gt-7 gt-8 gt-9 gt-10 gt-11 gt-12 gt-13 gt-14 gt-15 gt-16 gt-17 gt-18"> <span class="checked"></span> </button> <button type="action" name="act_stdam_20" class="dot gt-1 gt-2 gt-3 gt-4 gt-5 gt-6 gt-7 gt-8 gt-9 gt-10 gt-11 gt-12 gt-13 gt-14 gt-15 gt-16 gt-17 gt-18 gt-19"> <span class="checked"></span> </button> <button type="action" name="act_stdam_21" class="dot gt-1 gt-2 gt-3 gt-4 gt-5 gt-6 gt-7 gt-8 gt-9 gt-10 gt-11 gt-12 gt-13 gt-14 gt-15 gt-16 gt-17 gt-18 gt-19 gt-20"> <span class="checked"></span> </button>
1594605056
GiGs
Pro
Sheet Author
API Scripter
I may be missing something here. cant you extend the code you have for the 20 buttons to 40? It's hard to comment because the above code is missing at least two pieces, so it's not a complete solution. Action buttons require a sheet worker Your CSS references input buttons, but your html sample doesnt include them.
It looks like SavaGe is using this reference:&nbsp; <a href="https://wiki.roll20.net/CSS_Wizardry#Fill_Radio_Buttons_to_the_Left" rel="nofollow">https://wiki.roll20.net/CSS_Wizardry#Fill_Radio_Buttons_to_the_Left</a> I don't know why it wouldn't work for more than 20 buttons. on an attribute. If you have the 20 buttons across separate containing &lt;div&gt; to put them on separate lines, then you might need to move the hidden input and update the CSS selectors.
1594609360
SᵃᵛᵃǤᵉ
Sheet Author
API Scripter
Let me double check everything as far as sheet-workers go. i have it working all the way up to 20 still doesn’t answer why it fails to go to 21 or more.&nbsp; I’ll give it another once over in the morning.
1594651758
SᵃᵛᵃǤᵉ
Sheet Author
API Scripter
GiGs said: I may be missing something here. cant you extend the code you have for the 20 buttons to 40? It's hard to comment because the above code is missing at least two pieces, so it's not a complete solution. Action buttons require a sheet worker Your CSS references input buttons, but your html sample doesnt include them. GiGs, Thanks for the help. You reminded me to check the sheetworker associated with the HTML function. The array in it only went up to 20. That was the problem.
1594677658
GiGs
Pro
Sheet Author
API Scripter
Excellent :)
1594678743

Edited 1594678764
SᵃᵛᵃǤᵉ
Sheet Author
API Scripter
Here's the result. My other problems are to set it up that the first button is empty until checked The number of buttons shown corresponds to 2x the bod attribute.
1594683194
GiGs
Pro
Sheet Author
API Scripter
For the #2, my guess is you have to extend the code in your first post: extend this to 40 &lt;button type="action" name="act_stdam_21" class="dot gt-1 gt-2 gt-3 gt-4 gt-5 gt-6 gt-7 gt-8 gt-9 gt-10 gt-11 gt-12 gt-13 gt-14 gt-15 gt-16 gt-17 gt-18 gt-19 gt-20"&gt; &lt;span class="checked"&gt;&lt;/span&gt; &lt;/button&gt; Adding new gt-21, gt-22, etc with each one. Then extend your css input.sheet-dot[value="21"] ~ button.sheet-gt-21 &gt; span.sheet-checked { display: none; } up to 40. The input which has the sheet.dot class should have its value set with a sheet worker, to a value equal to Body x2.
1594689345
SᵃᵛᵃǤᵉ
Sheet Author
API Scripter
So you're saying set the array length in the sheet worker with a function in it.&nbsp;
1594689742
GiGs
Pro
Sheet Author
API Scripter
No. I'm saying you need a completely separate sheet worker that does exactly one thing: it sets the value of the input to body x2. The CSS you already have then handles which buttons are visible.
1594691247
SᵃᵛᵃǤᵉ
Sheet Author
API Scripter
Trying to figure out what input you mean &lt;input type="hidden" name="attr_stdam" class="dot" value="1" /&gt; &lt;button type="action" name="act_stdam_1" class="dot"&gt; &lt;span class="checked"&gt;&lt;/span&gt; &lt;/button&gt; &lt;button type="action" name="act_stdam_2" class="dot gt-1"&gt; &lt;span class="checked"&gt;&lt;/span&gt; &lt;/button&gt; &lt;button type="action" name="act_stdam_3" class="dot gt-1 gt-2"&gt; &lt;span class="checked"&gt;&lt;/span&gt; &lt;/button&gt; &lt;button type="action" name="act_stdam_4" class="dot gt-1 gt-2 gt-3"&gt; &lt;span class="checked"&gt;&lt;/span&gt; &lt;/button&gt; &lt;button type="action" name="act_stdam_5" class="dot gt-1 gt-2 gt-3 gt-4"&gt; &lt;span class="checked"&gt;&lt;/span&gt; &lt;/button&gt; &lt;button type="action" name="act_stdam_6" class="dot gt-1 gt-2 gt-3 gt-4 gt-5"&gt; &lt;span class="checked"&gt;&lt;/span&gt; &lt;/button&gt; &lt;button type="action" name="act_stdam_7" class="dot gt-1 gt-2 gt-3 gt-4 gt-5 gt-6"&gt; &lt;span class="checked"&gt;&lt;/span&gt; &lt;/button&gt; &lt;button type="action" name="act_stdam_8" class="dot gt-1 gt-2 gt-3 gt-4 gt-5 gt-6 gt-7"&gt; &lt;span class="checked"&gt;&lt;/span&gt; &lt;/button&gt; &lt;button type="action" name="act_stdam_9" class="dot gt-1 gt-2 gt-3 gt-4 gt-5 gt-6 gt-7 gt-8"&gt; &lt;span class="checked"&gt;&lt;/span&gt; &lt;/button&gt; &lt;button type="action" name="act_stdam_10" class="dot gt-1 gt-2 gt-3 gt-4 gt-5 gt-6 gt-7 gt-8 gt-9"&gt; &lt;span class="checked"&gt;&lt;/span&gt; &lt;/button&gt; &lt;button type="action" name="act_stdam_11" class="dot gt-1 gt-2 gt-3 gt-4 gt-5 gt-6 gt-7 gt-8 gt-9 gt-10"&gt; &lt;span class="checked"&gt;&lt;/span&gt; &lt;/button&gt; &lt;button type="action" name="act_stdam_12" class="dot gt-1 gt-2 gt-3 gt-4 gt-5 gt-6 gt-7 gt-8 gt-9 gt-10 gt-11"&gt; &lt;span class="checked"&gt;&lt;/span&gt; &lt;/button&gt; &lt;button type="action" name="act_stdam_13" class="dot gt-1 gt-2 gt-3 gt-4 gt-5 gt-6 gt-7 gt-8 gt-9 gt-10 gt-11 gt-12"&gt; &lt;span class="checked"&gt;&lt;/span&gt; &lt;/button&gt; &lt;button type="action" name="act_stdam_14" class="dot gt-1 gt-2 gt-3 gt-4 gt-5 gt-6 gt-7 gt-8 gt-9 gt-10 gt-11 gt-12 gt-13"&gt; &lt;span class="checked"&gt;&lt;/span&gt; &lt;/button&gt; &lt;button type="action" name="act_stdam_15" class="dot gt-1 gt-2 gt-3 gt-4 gt-5 gt-6 gt-7 gt-8 gt-9 gt-10 gt-11 gt-12 gt-13 gt-14"&gt; &lt;span class="checked"&gt;&lt;/span&gt; &lt;/button&gt; &lt;button type="action" name="act_stdam_16" class="dot gt-1 gt-2 gt-3 gt-4 gt-5 gt-6 gt-7 gt-8 gt-9 gt-10 gt-11 gt-12 gt-13 gt-14 gt-15"&gt; &lt;span class="checked"&gt;&lt;/span&gt; &lt;/button&gt; &lt;button type="action" name="act_stdam_17" class="dot gt-1 gt-2 gt-3 gt-4 gt-5 gt-6 gt-7 gt-8 gt-9 gt-10 gt-11 gt-12 gt-13 gt-14 gt-15 gt-16"&gt; &lt;span class="checked"&gt;&lt;/span&gt; &lt;/button&gt; &lt;button type="action" name="act_stdam_18" class="dot gt-1 gt-2 gt-3 gt-4 gt-5 gt-6 gt-7 gt-8 gt-9 gt-10 gt-11 gt-12 gt-13 gt-14 gt-15 gt-16 gt-17"&gt; &lt;span class="checked"&gt;&lt;/span&gt; &lt;/button&gt; &lt;button type="action" name="act_stdam_19" class="dot gt-1 gt-2 gt-3 gt-4 gt-5 gt-6 gt-7 gt-8 gt-9 gt-10 gt-11 gt-12 gt-13 gt-14 gt-15 gt-16 gt-17 gt-18"&gt; &lt;span class="checked"&gt;&lt;/span&gt; &lt;/button&gt; &lt;button type="action" name="act_stdam_20" class="dot gt-1 gt-2 gt-3 gt-4 gt-5 gt-6 gt-7 gt-8 gt-9 gt-10 gt-11 gt-12 gt-13 gt-14 gt-15 gt-16 gt-17 gt-18 gt-19"&gt; &lt;span class="checked"&gt;&lt;/span&gt; &lt;/button&gt; &lt;button type="action" name="act_stdam_21" class="dot gt-1 gt-2 gt-3 gt-4 gt-5 gt-6 gt-7 gt-8 gt-9 gt-10 gt-11 gt-12 gt-13 gt-14 gt-15 gt-16 gt-17 gt-18 gt-19 gt-20"&gt; &lt;span class="checked"&gt;&lt;/span&gt; &lt;/button&gt; &lt;button type="action" name="act_stdam_22" class="dot gt-1 gt-2 gt-3 gt-4 gt-5 gt-6 gt-7 gt-8 gt-9 gt-10 gt-11 gt-12 gt-13 gt-14 gt-15 gt-16 gt-17 gt-18 gt-19 gt-20 gt-21"&gt; &lt;span class="checked"&gt;&lt;/span&gt; &lt;/button&gt; &lt;button type="action" name="act_stdam_23" class="dot gt-1 gt-2 gt-3 gt-4 gt-5 gt-6 gt-7 gt-8 gt-9 gt-10 gt-11 gt-12 gt-13 gt-14 gt-15 gt-16 gt-17 gt-18 gt-19 gt-20 gt-21 gt-22"&gt; &lt;span class="checked"&gt;&lt;/span&gt; &lt;/button&gt; &lt;button type="action" name="act_stdam_24" class="dot gt-1 gt-2 gt-3 gt-4 gt-5 gt-6 gt-7 gt-8 gt-9 gt-10 gt-11 gt-12 gt-13 gt-14 gt-15 gt-16 gt-17 gt-18 gt-19 gt-20 gt-21 gt-22 gt-23"&gt; &lt;span class="checked"&gt;&lt;/span&gt; &lt;/button&gt; &lt;button type="action" name="act_stdam_25" class="dot gt-1 gt-2 gt-3 gt-4 gt-5 gt-6 gt-7 gt-8 gt-9 gt-10 gt-11 gt-12 gt-13 gt-14 gt-15 gt-16 gt-17 gt-18 gt-19 gt-20 gt-21 gt-22 gt-23 gt-24"&gt; &lt;span class="checked"&gt;&lt;/span&gt; &lt;/button&gt; &lt;button type="action" name="act_stdam_26" class="dot gt-1 gt-2 gt-3 gt-4 gt-5 gt-6 gt-7 gt-8 gt-9 gt-10 gt-11 gt-12 gt-13 gt-14 gt-15 gt-16 gt-17 gt-18 gt-19 gt-20 gt-21 gt-22 gt-23 gt-24 gt-25"&gt; &lt;span class="checked"&gt;&lt;/span&gt; &lt;/button&gt; &lt;button type="action" name="act_stdam_27" class="dot gt-1 gt-2 gt-3 gt-4 gt-5 gt-6 gt-7 gt-8 gt-9 gt-10 gt-11 gt-12 gt-13 gt-14 gt-15 gt-16 gt-17 gt-18 gt-19 gt-20 gt-21 gt-22 gt-23 gt-24 gt-25 gt-26"&gt; &lt;span class="checked"&gt;&lt;/span&gt; &lt;/button&gt; &lt;button type="action" name="act_stdam_28" class="dot gt-1 gt-2 gt-3 gt-4 gt-5 gt-6 gt-7 gt-8 gt-9 gt-10 gt-11 gt-12 gt-13 gt-14 gt-15 gt-16 gt-17 gt-18 gt-19 gt-20 gt-21 gt-22 gt-23 gt-24 gt-25 gt-26 gt-27"&gt; &lt;span class="checked"&gt;&lt;/span&gt; &lt;/button&gt; &lt;button type="action" name="act_stdam_29" class="dot gt-1 gt-2 gt-3 gt-4 gt-5 gt-6 gt-7 gt-8 gt-9 gt-10 gt-11 gt-12 gt-13 gt-14 gt-15 gt-16 gt-17 gt-18 gt-19 gt-20 gt-21 gt-22 gt-23 gt-24 gt-25 gt-26 gt-27 gt-28"&gt; &lt;span class="checked"&gt;&lt;/span&gt; &lt;/button&gt; &lt;button type="action" name="act_stdam_30" class="dot gt-1 gt-2 gt-3 gt-4 gt-5 gt-6 gt-7 gt-8 gt-9 gt-10 gt-11 gt-12 gt-13 gt-14 gt-15 gt-16 gt-17 gt-18 gt-19 gt-20 gt-21 gt-22 gt-23 gt-24 gt-25 gt-26 gt-27 gt-28 gt-29"&gt; &lt;span class="checked"&gt;&lt;/span&gt; &lt;/button&gt; &lt;button type="action" name="act_stdam_31" class="dot gt-1 gt-2 gt-3 gt-4 gt-5 gt-6 gt-7 gt-8 gt-9 gt-10 gt-11 gt-12 gt-13 gt-14 gt-15 gt-16 gt-17 gt-18 gt-19 gt-20 gt-21 gt-22 gt-23 gt-24 gt-25 gt-26 gt-27 gt-28 gt-29 gt-30"&gt; &lt;span class="checked"&gt;&lt;/span&gt; &lt;/button&gt; &lt;button type="action" name="act_stdam_32" class="dot gt-1 gt-2 gt-3 gt-4 gt-5 gt-6 gt-7 gt-8 gt-9 gt-10 gt-11 gt-12 gt-13 gt-14 gt-15 gt-16 gt-17 gt-18 gt-19 gt-20 gt-21 gt-22 gt-23 gt-24 gt-25 gt-26 gt-27 gt-28 gt-29 gt-30 gt-31"&gt; &lt;span class="checked"&gt;&lt;/span&gt; &lt;/button&gt; &lt;button type="action" name="act_stdam_33" class="dot gt-1 gt-2 gt-3 gt-4 gt-5 gt-6 gt-7 gt-8 gt-9 gt-10 gt-11 gt-12 gt-13 gt-14 gt-15 gt-16 gt-17 gt-18 gt-19 gt-20 gt-21 gt-22 gt-23 gt-24 gt-25 gt-26 gt-27 gt-28 gt-29 gt-30 gt-31 gt-32"&gt; &lt;span class="checked"&gt;&lt;/span&gt; &lt;/button&gt; &lt;button type="action" name="act_stdam_34" class="dot gt-1 gt-2 gt-3 gt-4 gt-5 gt-6 gt-7 gt-8 gt-9 gt-10 gt-11 gt-12 gt-13 gt-14 gt-15 gt-16 gt-17 gt-18 gt-19 gt-20 gt-21 gt-22 gt-23 gt-24 gt-25 gt-26 gt-27 gt-28 gt-29 gt-30 gt-31 gt-32 gt-33"&gt; &lt;span class="checked"&gt;&lt;/span&gt; &lt;/button&gt; &lt;button type="action" name="act_stdam_35" class="dot gt-1 gt-2 gt-3 gt-4 gt-5 gt-6 gt-7 gt-8 gt-9 gt-10 gt-11 gt-12 gt-13 gt-14 gt-15 gt-16 gt-17 gt-18 gt-19 gt-20 gt-21 gt-22 gt-23 gt-24 gt-25 gt-26 gt-27 gt-28 gt-29 gt-30 gt-31 gt-32 gt-33 gt-34"&gt; &lt;span class="checked"&gt;&lt;/span&gt; &lt;/button&gt; &lt;button type="action" name="act_stdam_36" class="dot gt-1 gt-2 gt-3 gt-4 gt-5 gt-6 gt-7 gt-8 gt-9 gt-10 gt-11 gt-12 gt-13 gt-14 gt-15 gt-16 gt-17 gt-18 gt-19 gt-20 gt-21 gt-22 gt-23 gt-24 gt-25 gt-26 gt-27 gt-28 gt-29 gt-30 gt-31 gt-32 gt-33 gt-34 gt-35"&gt; &lt;span class="checked"&gt;&lt;/span&gt; &lt;/button&gt; &lt;button type="action" name="act_stdam_37" class="dot gt-1 gt-2 gt-3 gt-4 gt-5 gt-6 gt-7 gt-8 gt-9 gt-10 gt-11 gt-12 gt-13 gt-14 gt-15 gt-16 gt-17 gt-18 gt-19 gt-20 gt-21 gt-22 gt-23 gt-24 gt-25 gt-26 gt-27 gt-28 gt-29 gt-30 gt-31 gt-32 gt-33 gt-34 gt-35 gt-36"&gt; &lt;span class="checked"&gt;&lt;/span&gt; &lt;/button&gt; &lt;button type="action" name="act_stdam_38" class="dot gt-1 gt-2 gt-3 gt-4 gt-5 gt-6 gt-7 gt-8 gt-9 gt-10 gt-11 gt-12 gt-13 gt-14 gt-15 gt-16 gt-17 gt-18 gt-19 gt-20 gt-21 gt-22 gt-23 gt-24 gt-25 gt-26 gt-27 gt-28 gt-29 gt-30 gt-31 gt-32 gt-33 gt-34 gt-35 gt-36 gt-37"&gt; &lt;span class="checked"&gt;&lt;/span&gt; &lt;/button&gt; &lt;button type="action" name="act_stdam_39" class="dot gt-1 gt-2 gt-3 gt-4 gt-5 gt-6 gt-7 gt-8 gt-9 gt-10 gt-11 gt-12 gt-13 gt-14 gt-15 gt-16 gt-17 gt-18 gt-19 gt-20 gt-21 gt-22 gt-23 gt-24 gt-25 gt-26 gt-27 gt-28 gt-29 gt-30 gt-31 gt-32 gt-33 gt-34 gt-35 gt-36 gt-37 gt-38"&gt; &lt;span class="checked"&gt;&lt;/span&gt; &lt;/button&gt; &lt;button type="action" name="act_stdam_40" class="dot gt-1 gt-2 gt-3 gt-4 gt-5 gt-6 gt-7 gt-8 gt-9 gt-10 gt-11 gt-12 gt-13 gt-14 gt-15 gt-16 gt-17 gt-18 gt-19 gt-20 gt-21 gt-22 gt-23 gt-24 gt-25 gt-26 gt-27 gt-28 gt-29 gt-30 gt-31 gt-32 gt-33 gt-34 gt-35 gt-36 gt-37 gt-38 gt-39"&gt; &lt;span class="checked"&gt;&lt;/span&gt; &lt;/button&gt; input.sheet-dot[value="0"] ~ button.sheet-gt-0 &gt; span.sheet-checked { display: none; } input.sheet-dot[value="1"] ~ button.sheet-gt-1 &gt; span.sheet-checked { display: none; } input.sheet-dot[value="2"] ~ button.sheet-gt-2 &gt; span.sheet-checked { display: none; } input.sheet-dot[value="3"] ~ button.sheet-gt-3 &gt; span.sheet-checked { display: none; } input.sheet-dot[value="4"] ~ button.sheet-gt-4 &gt; span.sheet-checked { display: none; } input.sheet-dot[value="5"] ~ button.sheet-gt-5 &gt; span.sheet-checked { display: none; } input.sheet-dot[value="6"] ~ button.sheet-gt-6 &gt; span.sheet-checked { display: none; } input.sheet-dot[value="7"] ~ button.sheet-gt-7 &gt; span.sheet-checked { display: none; } input.sheet-dot[value="8"] ~ button.sheet-gt-8 &gt; span.sheet-checked { display: none; } input.sheet-dot[value="9"] ~ button.sheet-gt-9 &gt; span.sheet-checked { display: none; } input.sheet-dot[value="10"] ~ button.sheet-gt-10 &gt; span.sheet-checked { display: none; } input.sheet-dot[value="11"] ~ button.sheet-gt-11 &gt; span.sheet-checked { display: none; } input.sheet-dot[value="12"] ~ button.sheet-gt-12 &gt; span.sheet-checked { display: none; } input.sheet-dot[value="13"] ~ button.sheet-gt-13 &gt; span.sheet-checked { display: none; } input.sheet-dot[value="14"] ~ button.sheet-gt-14 &gt; span.sheet-checked { display: none; } input.sheet-dot[value="15"] ~ button.sheet-gt-15 &gt; span.sheet-checked { display: none; } input.sheet-dot[value="16"] ~ button.sheet-gt-16 &gt; span.sheet-checked { display: none; } input.sheet-dot[value="17"] ~ button.sheet-gt-17 &gt; span.sheet-checked { display: none; } input.sheet-dot[value="18"] ~ button.sheet-gt-18 &gt; span.sheet-checked { display: none; } input.sheet-dot[value="19"] ~ button.sheet-gt-19 &gt; span.sheet-checked { display: none; } input.sheet-dot[value="20"] ~ button.sheet-gt-20 &gt; span.sheet-checked { display: none; } input.sheet-dot[value="21"] ~ button.sheet-gt-21 &gt; span.sheet-checked { display: none; } input.sheet-dot[value="22"] ~ button.sheet-gt-22 &gt; span.sheet-checked { display: none; } input.sheet-dot[value="23"] ~ button.sheet-gt-23 &gt; span.sheet-checked { display: none; } input.sheet-dot[value="24"] ~ button.sheet-gt-24 &gt; span.sheet-checked { display: none; } input.sheet-dot[value="25"] ~ button.sheet-gt-25 &gt; span.sheet-checked { display: none; } input.sheet-dot[value="26"] ~ button.sheet-gt-26 &gt; span.sheet-checked { display: none; } input.sheet-dot[value="27"] ~ button.sheet-gt-27 &gt; span.sheet-checked { display: none; } input.sheet-dot[value="28"] ~ button.sheet-gt-28 &gt; span.sheet-checked { display: none; } input.sheet-dot[value="29"] ~ button.sheet-gt-29 &gt; span.sheet-checked { display: none; } input.sheet-dot[value="30"] ~ button.sheet-gt-30 &gt; span.sheet-checked { display: none; } input.sheet-dot[value="31"] ~ button.sheet-gt-31 &gt; span.sheet-checked { display: none; } input.sheet-dot[value="32"] ~ button.sheet-gt-32 &gt; span.sheet-checked { display: none; } input.sheet-dot[value="34"] ~ button.sheet-gt-34 &gt; span.sheet-checked { display: none; } input.sheet-dot[value="35"] ~ button.sheet-gt-35 &gt; span.sheet-checked { display: none; } input.sheet-dot[value="36"] ~ button.sheet-gt-36 &gt; span.sheet-checked { display: none; } input.sheet-dot[value="37"] ~ button.sheet-gt-37 &gt; span.sheet-checked { display: none; } input.sheet-dot[value="38"] ~ button.sheet-gt-38 &gt; span.sheet-checked { display: none; } input.sheet-dot[value="39"] ~ button.sheet-gt-39 &gt; span.sheet-checked { display: none; } input.sheet-dot[value="40"] ~ button.sheet-gt-40 &gt; span.sheet-checked { display: none; }
1594691564
GiGs
Pro
Sheet Author
API Scripter
The input at the very top of that list, named&nbsp; stdam .&nbsp; I couldnt give its name because it wasn't in the code samples you've shown - but its class was:&nbsp; dot or sheet-dot .
1594692054
SᵃᵛᵃǤᵉ
Sheet Author
API Scripter
This part? button.sheet-dot { padding: 0; border: solid 1px #a8a8a8; cursor: pointer; width: 14px; height: 14px; border-radius: 50%; display: flex; justify-content: center; align-items: center; } button.sheet-dot &gt; span { width: 6px; height: 6px; border-radius: 50%; background: buttontext; }
1594692273
SᵃᵛᵃǤᵉ
Sheet Author
API Scripter
Wait--this one? &lt;input type="hidden" name="attr_stdam" class="dot" value="1" /&gt;
1594697516
GiGs
Pro
Sheet Author
API Scripter
yes, that last one. It looks like that's the one that controls the visibility of the buttons.
1594734844
SᵃᵛᵃǤᵉ
Sheet Author
API Scripter
As a test I changed the value to "21" and I still had 40 buttons showing.
1594736606
GiGs
Pro
Sheet Author
API Scripter
Can you post the sheet worker for the action buttons, and i'll mess around with the code in the morning.&nbsp;
1594736778
SᵃᵛᵃǤᵉ
Sheet Author
API Scripter
const stdamValues = ["1","2","3","4","5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "38", "39", "40"]; stdamValues.forEach(function(value) { on(`clicked:stdam_${value}`, function() { setAttrs({ "stdam": value }); }); });
1594745543
Finderski
Pro
Sheet Author
Compendium Curator
By guess is this: "stdam": value should be: "stdam": `${value}` Or set a variable to that before using setAttrs
1594747476

Edited 1594747815
SᵃᵛᵃǤᵉ
Sheet Author
API Scripter
Finderski said: By guess is this: "stdam": value should be: "stdam": `${value}` Or set a variable to that before using setAttrs Finderski, I implemented that change and this is the result. Edit: looks the css flipped out on me. However no impact to the number of buttons showing.
1594758925
Finderski
Pro
Sheet Author
Compendium Curator
Sorry...I'll have to let GiGs help you...I'm the worst at sheet workers... :-/
1594759333
SᵃᵛᵃǤᵉ
Sheet Author
API Scripter
At least you gave it a shot. I am also working on a way to display a number of buttons based on another attribute. The sheet worker as written displays the number of filled buttons.&nbsp;
1594784066
GiGs
Pro
Sheet Author
API Scripter
I've looked over the code samples and I'm missing important context to figure out what should be happening here. Can you post the html and css for the entire sheet to pastebin or gist.github.com, and describe what exactly you want to be happening?
1594844191

Edited 1594844324
SᵃᵛᵃǤᵉ
Sheet Author
API Scripter
Finally back at the house. Here is the link to the requested code. MWCharSheet The number of buttons shown is supposed to be 2 x Bod stat for both damage and fatigue. There should be no buttons filled if there is zero damage.
1594864691
GiGs
Pro
Sheet Author
API Scripter
I see the issue. While I exploring it by the way I noticed a problem in your sdot buttons. &nbsp;&nbsp;input.sheet-sdot[value="31"]&nbsp;~&nbsp;button.sheet-st-31&nbsp;&gt;&nbsp;span.sheet-checked, &nbsp;&nbsp;input.sheet-sdot[value="32"]&nbsp;~&nbsp;button.sheet-st-32&nbsp;&gt;&nbsp;span.sheet-checked, &nbsp;&nbsp;input.sheet-sdot[value="34"]&nbsp;~&nbsp;button.sheet-st-34&nbsp;&gt;&nbsp;span.sheet-checked, &nbsp;&nbsp;input.sheet-sdot[value="35"]&nbsp;~&nbsp;button.sheet-st-35&nbsp;&gt;&nbsp;span.sheet-checked,&nbsp;&nbsp; Notice there's no 33 value. The same is true in the fatigue list, so you'll need to fix that. Okay how to fix your problem. First add this sheet worker: &nbsp;&nbsp;&nbsp;&nbsp;on("change:bod&nbsp;sheet:opened",&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;getAttrs(['bod'],&nbsp;function(v)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setAttrs({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bodyx2:&nbsp;(parseInt(v.bod)&nbsp;||&nbsp;0)&nbsp;*2 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;}); Then add a hidden input along with your stdam input, like so: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type="hidden"&nbsp;name="attr_stdam"&nbsp;class="sdot"&nbsp;value="1"&nbsp;/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type="hidden"&nbsp;name="attr_bodyx2"&nbsp;class="sbody"&nbsp;value="1"&nbsp;/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type="action"&nbsp;name="act_stdam_1"&nbsp;class="sdot"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&nbsp;class="checked"&gt;&lt;/span&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Now on to the CSS. Before telling you the fix, here's a bit of streamlining: you have entries like this &nbsp;&nbsp;input.sheet-sdot[value="0"]&nbsp;~&nbsp;button.sheet-st-0&nbsp;&gt;&nbsp;span.sheet-checked&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;none; &nbsp;&nbsp;}&nbsp;&nbsp; &nbsp;&nbsp;input.sheet-sdot[value="1"]&nbsp;~&nbsp;button.sheet-st-1&nbsp;&gt;&nbsp;span.sheet-checked&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;none; &nbsp;&nbsp;} &nbsp;&nbsp; Whenever you have multiple css rules that have the same value, you can do this: input.sheet-sdot[value="0"]&nbsp;~&nbsp;button.sheet-st-0&nbsp;&gt;&nbsp;span.sheet-checked, &nbsp;&nbsp;input.sheet-sdot[value="1"]&nbsp;~&nbsp;button.sheet-st-1&nbsp;&gt;&nbsp;span.sheet-checked, &nbsp;&nbsp;/* many more entries here, each ending with a comma */ &nbsp;&nbsp;input.sheet-sdot[value="40"]&nbsp;~&nbsp;button.sheet-st-40 { &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;none; &nbsp;&nbsp;}&nbsp;&nbsp; So, what you need to add to the CSS is this: input.sheet-sbody[value="0"]&nbsp;~&nbsp;button.sheet-st-0, &nbsp;&nbsp;input.sheet-sbody[value="1"]&nbsp;~&nbsp;button.sheet-st-1, &nbsp;&nbsp;input.sheet-sbody[value="2"]&nbsp;~&nbsp;button.sheet-st-2, &nbsp;&nbsp;input.sheet-sbody[value="3"]&nbsp;~&nbsp;button.sheet-st-3, &nbsp;&nbsp;input.sheet-sbody[value="4"]&nbsp;~&nbsp;button.sheet-st-4, &nbsp;&nbsp;input.sheet-sbody[value="5"]&nbsp;~&nbsp;button.sheet-st-5, &nbsp;&nbsp;input.sheet-sbody[value="6"]&nbsp;~&nbsp;button.sheet-st-6, &nbsp;&nbsp;input.sheet-sbody[value="7"]&nbsp;~&nbsp;button.sheet-st-7, &nbsp;&nbsp;input.sheet-sbody[value="8"]&nbsp;~&nbsp;button.sheet-st-8, &nbsp;&nbsp;input.sheet-sbody[value="9"]&nbsp;~&nbsp;button.sheet-st-9, &nbsp;&nbsp;input.sheet-sbody[value="10"]&nbsp;~&nbsp;button.sheet-st-10, &nbsp;&nbsp;input.sheet-sbody[value="11"]&nbsp;~&nbsp;button.sheet-st-11, &nbsp;&nbsp;input.sheet-sbody[value="12"]&nbsp;~&nbsp;button.sheet-st-12, &nbsp;&nbsp;input.sheet-sbody[value="13"]&nbsp;~&nbsp;button.sheet-st-13, &nbsp;&nbsp;input.sheet-sbody[value="14"]&nbsp;~&nbsp;button.sheet-st-14, &nbsp;&nbsp;input.sheet-sbody[value="15"]&nbsp;~&nbsp;button.sheet-st-15, &nbsp;&nbsp;input.sheet-sbody[value="16"]&nbsp;~&nbsp;button.sheet-st-16, &nbsp;&nbsp;input.sheet-sbody[value="17"]&nbsp;~&nbsp;button.sheet-st-17, &nbsp;&nbsp;input.sheet-sbody[value="18"]&nbsp;~&nbsp;button.sheet-st-18, &nbsp;&nbsp;input.sheet-sbody[value="19"]&nbsp;~&nbsp;button.sheet-st-19, &nbsp;&nbsp;input.sheet-sbody[value="20"]&nbsp;~&nbsp;button.sheet-st-20, &nbsp;&nbsp;input.sheet-sbody[value="21"]&nbsp;~&nbsp;button.sheet-st-21, &nbsp;&nbsp;input.sheet-sbody[value="22"]&nbsp;~&nbsp;button.sheet-st-22, &nbsp;&nbsp;input.sheet-sbody[value="23"]&nbsp;~&nbsp;button.sheet-st-23, &nbsp;&nbsp;input.sheet-sbody[value="24"]&nbsp;~&nbsp;button.sheet-st-24, &nbsp;&nbsp;input.sheet-sbody[value="25"]&nbsp;~&nbsp;button.sheet-st-25, &nbsp;&nbsp;input.sheet-sbody[value="26"]&nbsp;~&nbsp;button.sheet-st-26, &nbsp;&nbsp;input.sheet-sbody[value="27"]&nbsp;~&nbsp;button.sheet-st-27, &nbsp;&nbsp;input.sheet-sbody[value="28"]&nbsp;~&nbsp;button.sheet-st-28, &nbsp;&nbsp;input.sheet-sbody[value="29"]&nbsp;~&nbsp;button.sheet-st-29, &nbsp;&nbsp;input.sheet-sbody[value="30"]&nbsp;~&nbsp;button.sheet-st-30, &nbsp;&nbsp;input.sheet-sbody[value="31"]&nbsp;~&nbsp;button.sheet-st-31, &nbsp;&nbsp;input.sheet-sbody[value="32"]&nbsp;~&nbsp;button.sheet-st-32, &nbsp;&nbsp;input.sheet-sbody[value="33"]&nbsp;~&nbsp;button.sheet-st-33, &nbsp;&nbsp;input.sheet-sbody[value="34"]&nbsp;~&nbsp;button.sheet-st-34, &nbsp;&nbsp;input.sheet-sbody[value="35"]&nbsp;~&nbsp;button.sheet-st-35, &nbsp;&nbsp;input.sheet-sbody[value="36"]&nbsp;~&nbsp;button.sheet-st-36, &nbsp;&nbsp;input.sheet-sbody[value="37"]&nbsp;~&nbsp;button.sheet-st-37, &nbsp;&nbsp;input.sheet-sbody[value="38"]&nbsp;~&nbsp;button.sheet-st-38, &nbsp;&nbsp;input.sheet-sbody[value="39"]&nbsp;~&nbsp;button.sheet-st-39, &nbsp;&nbsp;input.sheet-sbody[value="40"]&nbsp;~&nbsp;button.sheet-st-40&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;none; &nbsp;&nbsp;} You could delete all the odd numbers, since bodyx2 cant ever be odd. This is tested, so I know it works. You need to do the same for the fatigue section, but you can use the same bodyx2 attribute if their are both based on body.
1594864830
GiGs
Pro
Sheet Author
API Scripter
Regarding your other problem of not being able to clear damage (always having that first box checked), you need another button to set the stdam value to zero. I would do either: wrap the "Standard damage" title in a button, and have clicking that set stdam to 0. Put a button under the standard damage title, label it something like "clear damage" and have it set the stdam to 0.
1594918485
SᵃᵛᵃǤᵉ
Sheet Author
API Scripter
Thanks GiGs, I really appreciate your help. Here is the result.
1594955313
GiGs
Pro
Sheet Author
API Scripter
Excellent!