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

Use "Fill Radio Buttons to the Left" in repeating section?

1600105815

Edited 1600105874
I'm currently trying to create a repeating section for skills, that the players can add and individually name, in combination with the Fill Radio Buttons to the Left Sheetworker to assign a value that I can then use in other parts of the sheet. I know the sheetworker works in general outside of a repeating section. My assumption for why it doesn't work inside a repeating section is, that the parts that are currently named "interessenwert" have to be a) identical inside as well as outside the sheetworker and b) unique identifiers for every created skill. To solve this I would probably need to make use of the ID of each repitem and assign the name-attribute based on the ID. I just... don't know how to do that or if it's even possible (or if I'm even on the right track in regards to what the problem is) and would greatly appreciate someone pointing me in the right direction. The current code, with the parts that I assume need to be identical bolded: <label>Interessen</label> <fieldset class="repeating_interessen"> <input type="text" name="attr_interessenname" /> <div class="dots"> <input type="hidden" name="attr_ interessenwert " class="dot" value="1" /> <button type="action" name="act_ interessenwert _1" class="dot"> <span class="checked"></span> </button> <button type="action" name="act_ interessenwert _2" class="dot gt-1"> <span class="checked"></span> </button> </div> </fieldset> <script type="text/worker"> const interessenwert Values = ["1","2"]; getSectionIDs("interessen", function(idarray) { for(var i=0; i < idarray.length; i++) { interessenwert _Values.forEach(function(value) { on(`clicked: interessenwert _${value}`, function() { setAttrs({ " interessenwert ": value }); }); }); } }); </script>
1600108379

Edited 1600108455
GiGs
Pro
Sheet Author
API Scripter
I'm not clear on what you're trying to do, but there is a problem in your sheet worker. You have a for loop, and a forEach loop inside it. You should only have one of them. const interessenwert Values = ["1","2"]; getSectionIDs("interessen", function(idarray) { interessenwert Values.forEach(function(value) { on(`clicked: interessenwert _${value}`, function() { setAttrs({ " interessenwert ": value }); }); }); }); You also have the name  interessenwert Values in one place, and  interessenwert_ Values in another, which was likely causing the worker to crash.
Thank you for your quick reply! I changed the things you pointed out, but it still doesn't work. My intention was to have a section for skills with each skill having a value of either one or two (in this case, but it would potentially go up to five in other repeating sections), looking like this: And while it does look like it's supposed to do, the buttons don't actually react or assign any value to the attribute.
1600110219
GiGs
Pro
Sheet Author
API Scripter
Can you post the CSS you're using?
Sure thing! It mostly is exactly the same as the code in the wiki + a bit of css grid for the layout. The @import for fonts is commented out, because I already had the pleasure to find out it completely disabled all of my CSS. /* Importierung von Custom Fonts CSS rules to specify families: font-family: 'Grenze Gotisch', cursive; font-family: 'Rye', cursive; @import url('<a href="https://fonts.googleapis.com/css2?family=Grenze+Gotisch:wght@300;400&amp;family=Rye&amp;display=swap" rel="nofollow">https://fonts.googleapis.com/css2?family=Grenze+Gotisch:wght@300;400&amp;family=Rye&amp;display=swap</a>'); label.sheet-headings { font-family: 'Grenze Gotisch', cursive; }*/ /* Formatierung der Radio Buttons Configure the button styling. This example makes it look like a radio. */ button.sheet-dot { padding: 0; border: solid 1px #a8a8a8; cursor: pointer; width: 14px; height: 14px; border-radius: 50%; display: inline-flex; justify-content: center; align-items: center; } button.sheet-dot &gt; span { width: 6px; height: 6px; border-radius: 50%; background: buttontext; } /* Hide the "checked" section of the radio if the hidden attribute value is greater than the button value*/ 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; } /* Layout */ .sheet-dots { display: inline-grid; grid-template-rows: 0fr; grid-template-columns: repeat(5, 1fr); } .sheet-grid-main-threerows { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto; column-gap: 20px; } .sheet-grid-main-tworows { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto; column-gap: 20px; } .sheet-grid-sub { display: grid; grid-template-columns: 2fr 1fr; }
1600184183

Edited 1600184511
GiGs
Pro
Sheet Author
API Scripter
I have found two problems. One I can fix, and one I can't. First, the one I can fix. The sheet worker doesnt account for being in a repeating section. It should be const&nbsp;interessenwertValues&nbsp;=&nbsp;["1","2",&nbsp;"3"]; getSectionIDs("repeating_interessen",&nbsp;function(idarray)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;interessenwertValues.forEach(function(value)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;on(`clicked: repeating_interessen: interessenwert_${value}`,&nbsp;function()&nbsp;{ &nbsp;&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;" repeating_interessen_ interessenwert":&nbsp;value &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); }); Notice the addition of the repeating_interessen to the clicked event and setAttrs. This ensures the values are being updated properly. You can do what I did to test this - add a visible copy of the input: &lt;fieldset&nbsp;class="repeating_interessen"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type="text"&nbsp;name="attr_interessenname"&nbsp;/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type="number"&nbsp;name="attr_interessenwert"&nbsp;class="dot"&nbsp;value="1"&nbsp;/&gt; This also allowed me to change the value, and see the dots working properly. The second problem: clicking the dot buttons doesnt do anything. It's being highlighted but the dot isnt appearing. This seems like a CSS issue, but my browser CSS inspector isnt working so I can examine it properly. The weird thing is when you change the value via the visible input above, the dots update properly, so the CSS is working properly in most respects. You'll need someone who understands roll20 CSS better than me to figure this one out. You could try reverting to the CSS-only method on the css wizardry page to see if that works. In my testing it works fine in a repeating section. It just needs some extra styling to position the dots properly and look less like sad eyes:
Thank you very much for your help so far! I corrected the code and tested it with the method you provided - got the same results as you. But when I tried the CSS-only method (copy paste the code inside the repeating section, without changing anything except commenting out the CSS I used for the other method) I got a different result: No sad looking eyes, which wouldn't have been a problem since I wanted to style them differently anyway as soon as everything works properly, but they also don't fill in as they are supposed to.
1600255248

Edited 1600255324
GiGs
Pro
Sheet Author
API Scripter
That suggests something in your code is interfering, or something you've commented out shouldnt have been. The code below is the entire code my test sheet had - you can see it's mainly from the css wizardry page on top of your base: &lt;label&gt;Interessen&lt;/label&gt; &lt;fieldset&nbsp;class="repeating_interessen"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class="radiodots"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type="text"&nbsp;name="attr_interessenname"&nbsp;/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type="radio"&nbsp;name="attr_r"&nbsp;value="1"&nbsp;checked="checked"&gt;&lt;span&gt;&lt;/span&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type="radio"&nbsp;name="attr_r"&nbsp;value="2"&gt;&lt;span&gt;&lt;/span&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &lt;/fieldset&gt; I put the section row inside a div (usually good practice, it allows you to target the whole row with CSS more easily) , and added a new class name. As it happens I didnt use the class name. here's the full CSS my sheet had. Hopefully this helps you identify the issue. &nbsp;&nbsp;/*&nbsp;radio&nbsp;*/ &nbsp;&nbsp;/*&nbsp;Hide&nbsp;actual&nbsp;radio&nbsp;*/ input[type="radio"]&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;opacity:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;16px; &nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;16px; &nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;relative; &nbsp;&nbsp;&nbsp;&nbsp;top:&nbsp;5px; &nbsp;&nbsp;&nbsp;&nbsp;left:&nbsp;6px; &nbsp;&nbsp;&nbsp;&nbsp;margin:&nbsp;-10px; &nbsp;&nbsp;&nbsp;&nbsp;cursor:&nbsp;pointer; &nbsp;&nbsp;&nbsp;&nbsp;z-index:&nbsp;1; } /*&nbsp;Fake&nbsp;radio&nbsp;*/ input[type="radio"]&nbsp;+&nbsp;span::before&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;margin-right:&nbsp;4px; &nbsp;&nbsp;&nbsp;&nbsp;border:&nbsp;solid&nbsp;1px&nbsp;#a8a8a8; &nbsp;&nbsp;&nbsp;&nbsp;line-height:&nbsp;14px; &nbsp;&nbsp;&nbsp;&nbsp;text-align:&nbsp;center; &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;inline-block; &nbsp;&nbsp;&nbsp;&nbsp;vertical-align:&nbsp;middle; &nbsp;&nbsp;&nbsp;&nbsp;box-shadow:&nbsp;0&nbsp;0&nbsp;2px&nbsp;#ccc; &nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;#f6f6f6; &nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;radial-gradient(#f6f6f6,&nbsp;#dfdfdf); &nbsp;&nbsp;&nbsp;&nbsp;content:&nbsp;"•"; &nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;12px; &nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;12px; &nbsp;&nbsp;&nbsp;&nbsp;font-size:&nbsp;24px; &nbsp;&nbsp;&nbsp;&nbsp;border-radius:&nbsp;50%; } /*&nbsp;Remove&nbsp;dot&nbsp;from&nbsp;all&nbsp;radios&nbsp;_after_&nbsp;selected&nbsp;one&nbsp;*/ input[type="radio"]:checked&nbsp;~&nbsp;input[type="radio"]&nbsp;+&nbsp;span::before&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;content:&nbsp;""; }
Whatever exactly the issue was, it had something to do with the code for the CSS-only method and the other one interfering with each other, and it was easily solvable by giving the CSS-only dots their own class and accessing it in the CSS. Which means I can use the CSS-only method for the repeating sections, if push comes to shove! I've also tried to fiddle around a bit with the first method for the repeating sections to see if I can figure out what the issue is or at least narrow it down somewhat. I ended up adding two buttons to each section row that share the same CSS as the other ones and, on being clicked, change the value of "repeating_interessen_interessenwert" - just with the difference that these new buttons assign a static value outside of the .forEach function (so it needs two sheetworkers). With these buttons, everything works as intended: On being clicked the value changes, which means the buttons change appearence (both the buttons with the "old" sheetworker as well as those with the two new ones). Could that mean that the CSS is completely fine and the issue has something to do with the .forEach-function? HTML: &lt;fieldset class="repeating_interessen"&gt; &lt;div&gt; &lt;input type="text" name="attr_interessenname" /&gt; &lt;div class="dots"&gt; &lt;input type="hidden" name="attr_interessenwert" class="dot" value="1" /&gt; &lt;button type="action" name="act_interessenwert_1" class="dot"&gt; &lt;span class="checked"&gt;&lt;/span&gt; &lt;/button&gt; &lt;button type="action" name="act_interessenwert_2" class="dot gt-1"&gt; &lt;span class="checked"&gt;&lt;/span&gt; &lt;/button&gt; &lt;span&gt;Outside .forEach function: &lt;/span&gt; &lt;button type="action" name="act_test1" class="dot"&gt; &lt;span class="checked"&gt;&lt;/span&gt; &lt;/button&gt; &lt;button type="action" name="act_test2" class="dot gt-1"&gt; &lt;span class="checked"&gt;&lt;/span&gt; &lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;/fieldset&gt; &lt;script type="text/worker"&gt; const interessenwertValues = ["1","2"]; interessenwertValues.forEach(function(value) { on(`clicked:repeating_interessen:interessenwert_${value}`, function() { setAttrs({ "repeating_interessen_interessenwert": value }); }); }); on(`clicked:repeating_interessen:test1`, function() { setAttrs({ "repeating_interessen_interessenwert": 1 }); }); on(`clicked:repeating_interessen:test2`, function() { setAttrs({ "repeating_interessen_interessenwert": 2 }); }); &lt;/script&gt; CSS: .sheet-dots { display: inline-grid; grid-template-rows: 0fr; grid-template-columns: repeat(5, 1fr); } /* Outside Repeating Section Configure the button styling. This example makes it look like a radio. */ button.sheet-dot { padding: 0; border: solid 1px #a8a8a8; cursor: pointer; width: 14px; height: 14px; border-radius: 50%; display: inline-flex; justify-content: center; align-items: center; } button.sheet-dot &gt; span { width: 6px; height: 6px; border-radius: 50%; background: buttontext; } /* Hide the "checked" section of the radio if the hidden attribute value is greater than the button value*/ 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; }
1600276883

Edited 1600276979
GiGs
Pro
Sheet Author
API Scripter
I'm baffled why the buttons outside the forEach work, but those inside dont. You can delete (or comment out) the contents of your current script block and try this: on(`clicked:repeating_interessen:interessenwert_1`, function() { setAttrs({ "repeating_interessen_interessenwert": 1 }); }); on(`clicked:repeating_interessen:interessenwert_2`, function() { setAttrs({ "repeating_interessen_interessenwert": 2 }); });
1600277093

Edited 1600277525
GiGs
Pro
Sheet Author
API Scripter
OMG I just remembered: There's an issue with action buttons that have underscores in their name. It affects sheet workers, not CSS IIRC, so I don't know if it applies here. But try changing&nbsp; interessenwert_1 to&nbsp; interessenwert1 In all the places that need changing. EDIT: &nbsp;yes, this is what is causing the issue. I just tested it. I've never seen this particular error before. I was thinking it must be a CSS issue, but its a roll20 bug - action button names must not include an underscore. I only remembered about this issue because of seeing your test1 names without the underscore next to the names with the underscore.
1600277402
GiGs
Pro
Sheet Author
API Scripter
Code used to test and confirm this bug: &lt;fieldset&nbsp;class="repeating_interessen"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type="text"&nbsp;name="attr_interessenname"&nbsp;/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class="dots"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type="hidden"&nbsp;name="attr_interessenwert"&nbsp;class="dot"&nbsp;value="1"&nbsp;/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type="action"&nbsp;name="act_interessenwert1"&nbsp;class="dot"&gt; &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;&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type="action"&nbsp;name="act_interessenwert2"&nbsp;class="dot&nbsp;gt-1"&gt; &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;&lt;/button&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&lt;/fieldset&gt; &nbsp;&nbsp; &nbsp;&nbsp;&lt;script&nbsp;type="text/worker"&gt; &nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;interessenwertValues&nbsp;=&nbsp;["1","2"]; &nbsp;&nbsp;&nbsp;&nbsp;interessenwertValues.forEach(function(value)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;on(`clicked:repeating_interessen:interessenwert${value}`,&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setAttrs({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"repeating_interessen_interessenwert":&nbsp;value &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp; &nbsp;&nbsp;&lt;/script&gt;
Such a little thing to break the whole bit! Thank you so much! It might be a good thing to change the code for this on the CSS wizardry page, if this is a "must not do"-thing. I think I saw at least two other codes there that also use underscores for action button names.
1600295599

Edited 1600295846
GiGs
Pro
Sheet Author
API Scripter
Good idea. I wonder if the code on the sheet ever worked. It's possible this bug was introduced at some point, and the code used to work fine.&nbsp; Edit: just remembered the code on the sheet does work. It's specifically an issue inside repeating sections, and there needs to be a note to that effect.
1600297836

Edited 1600298212
Andreas J.
Forum Champion
Sheet Author
Translator
Regarding the name restriction, it's mentioned on the main page dedicated to Buttons: <a href="https://wiki.roll20.net/Button#Action_Button" rel="nofollow">https://wiki.roll20.net/Button#Action_Button</a> Are you saying this is only a problem in repeating sections?
1600320679
vÍnce
Pro
Sheet Author
📜🗡Andreas J.🏹📜 said: Regarding the name restriction, it's mentioned on the main page dedicated to Buttons: <a href="https://wiki.roll20.net/Button#Action_Button" rel="nofollow">https://wiki.roll20.net/Button#Action_Button</a> Are you saying this is only a problem in repeating sections? Do not use action button names that include underscores, otherwise they will fail to trigger as a detectable event for sheetworkers. Funny, I was the one that added that line to the wiki and I missed that in my experiments last night with the OP's problem.&nbsp; lol AFAIK, it's an issue regardless if it's in a repeating section.
1600335175
GiGs
Pro
Sheet Author
API Scripter
The code linked in the OP of this thread does work outside of a repeating section, and that has an underscore in the button names.