Sheet worker doesn't like html+CSS cycling buttons

So I have a number of cycling buttons as per  CSS_Wizardry#Cycling_Button  but using the old method. Here's one: <div class="sheet-box">     <input type="radio" class="sheet-box sheet-b0" name="attr_box01" value="0" checked>     <input type="radio" class="sheet-box sheet-b1" name="attr_box01" value="1">     <input type="radio" class="sheet-box sheet-b2" name="attr_box01" value="2">     <input type="radio" class="sheet-box sheet-b3" name="attr_box01" value="3">     <input type="radio" class="sheet-box sheet-b4" name="attr_box01" value="4">             <span class="sheet-box sheet-b0"><input style="background:url(...);" type='text' disabled='true' name='attr_main' /></span>             <span class="sheet-box sheet-b1"><input style="background:url(...);" type='text' disabled='true' name='attr_main' /></span>             <span class="sheet-box sheet-b2"><input style="background:url(...);" type='text' disabled='true' name='attr_main' /></span>              <span class="sheet-box sheet-b3"><input style="background:url(...);" type='text' disabled='true' name='attr_main' /></span>             <span class="sheet-box sheet-b4"><input style="background:url(...);" type='text' disabled='true' name='attr_main' /></span> </div> Where the ...s represent links to different images. Here's the CSS: div.sheet-box {     width: 77px;     height: 77px;     position: relative;     border-color: transparent; } input.sheet-box {     width: 77px;     height: 77px;     position: absolute;     z-index: 1;     opacity: 0%;     border-color: transparent; } span.sheet-box {     margin: 0px 0 0 0px;     display: none;     border-color: transparent; } input.sheet-b0 { z-index: 2; } input.sheet-b0:checked + input.sheet-b1, input.sheet-b1:checked + input.sheet-b2, input.sheet-b2:checked + input.sheet-b3, input.sheet-b3:checked + input.sheet-b4 { z-index: 3; } input.sheet-b0:checked ~ span.sheet-b0, input.sheet-b1:checked ~ span.sheet-b1, input.sheet-b2:checked ~ span.sheet-b2, input.sheet-b3:checked ~ span.sheet-b3, input.sheet-b4:checked ~ span.sheet-b4 { display: inline-block; } What it does is display only one of the five images at a time and by clicking on the image it will switch to the next one in order, cycling back round to the first one (sheet-b0) after the last. Now what I'm trying to do is run a calculation based on the value associated with the image currently being displayed and then use the result of that calculation for something else. I can do a simple calculated field like:  <input type="number" name="attr_sum" value="(@{box01}+@{box02})" disabled="true" /> And that will give me the correct result. For example, if box01 is showing its #2 image and box02 is showing its #3 image then the calculated field will return 5. Great. Problem is, the 'something else' that needs that result won't pick it up from a disabled input. And the input won't calculate itself without being disabled. So somehow I need to get that calculated result into a non-disabled input. I've tried a sheet-worker like so: <input type="number" name="total" /> <script type="text/worker"> on("change:box01 change:box02", function () {     getAttrs(['box01', 'box02'], function(values) {         let box01 = +values.box01 || 0;                 let box02 = +values.box02 || 0;         setAttrs({             total: box01 + box02         });     }); });         </script> And this works for any normal attributes but not ones used in cycling buttons like I've done with box01 up above. Can anyone please advise on how to make the sheet-worker play ball? Or another means to get a calculation into a non-disabled input?

This is a much better explanation of the problem than in the original post, but it's still missing vital information to understand the problem. But first: Are you creating a separate script block for each sheet worker? It's better to have just one script block, and put all your sheet workers inside that. So <script type="text/worker"> /* all your sheet workers go here */ </script> Second point: when moving from disabled autocalcs to sheet workers, don't create new attributes: replace the original attribute with the sheet worker. So change from this: <input type="number" name="attr_sum" value="(@{box01}+@{box02})" disabled="true" /> to this <input type="number" name="attr_sum" value="" readonly /> And then the setAttrs in your sheet worker would be         setAttrs({             sum: box01 + box02         }); Okay, on to the actual problem: I'm still not clear what the actual issue is. Is it that the sheet worker is not calculating properly, or that the sum attribute is trigger for another sheet worker, or trigger for CSS, or what? What is the 'Something else' in this quote? 5. Problem is, the 'something else' that needs that result won't pick it up from a disabled input.

Yep, same script block for all workers. I only changed the name of the input for the example so as to make clear I wasn't applying the worker to a disabled input. The something-else is another display trick in which the value of an attribute determines what gets displayed:     <input class="sheet-pr sheet-pr0" type="checkbox" name="attr_sum" value="0"><!-- PR0 -->     <input class="sheet-pr sheet-pr1" type="checkbox" name="attr_sum" value="1"><!-- PR1 -->     <input class="sheet-pr sheet-pr2" type="checkbox" name="attr_sum" value="2"><!-- PR2 -->     <input class="sheet-pr sheet-pr3" type="checkbox" name="attr_sum" value="3"><!-- PR3 -->     <input class="sheet-pr sheet-pr4" type="checkbox" name="attr_sum" value="4"><!-- PR4 -->     <input class="sheet-pr sheet-pr5" type="checkbox" name="attr_sum" value="5"><!-- PR5 -->     <input class="sheet-pr sheet-pr6" type="checkbox" name="attr_sum" value="6"><!-- PR6 -->     <input class="sheet-pr sheet-pr7" type="checkbox" name="attr_sum" value="7"><!-- PR7 -->     <input class="sheet-pr sheet-pr8" type="checkbox" name="attr_sum" value="8"><!-- PR8 -->   <div class="sheet-prshow-PR0"><img src="..." ></div>   <div class="sheet-prshow-PR1"><img src="..." ></div>   <div class="sheet-prshow-PR2"><img src="..." ></div>   <div class="sheet-prshow-PR3"><img src="..." ></div>   <div class="sheet-prshow-PR4"><img src="..." ></div>   <div class="sheet-prshow-PR5"><img src="..." ></div>   <div class="sheet-prshow-PR6"><img src="..." ></div>   <div class="sheet-prshow-PR7"><img src="..." ></div>   <div class="sheet-prshow-PR8"><img src="..." ></div> CSS: .charsheet div[class^="sheet-prshow"] {   display: none; } .charsheet input.sheet-pr0:checked ~ div.sheet-prshow-PR0, .charsheet input.sheet-pr1:checked ~ div.sheet-prshow-PR1, .charsheet input.sheet-pr2:checked ~ div.sheet-prshow-PR2, .charsheet input.sheet-pr3:checked ~ div.sheet-prshow-PR3, .charsheet input.sheet-pr4:checked ~ div.sheet-prshow-PR4, .charsheet input.sheet-pr5:checked ~ div.sheet-prshow-PR5, .charsheet input.sheet-pr6:checked ~ div.sheet-prshow-PR6, .charsheet input.sheet-pr7:checked ~ div.sheet-prshow-PR7, .charsheet input.sheet-pr8:checked ~ div.sheet-prshow-PR8 {   display: block; } .charsheet input.sheet-pr {   width: 0px;   height: 0px;   opacity: 0;   display: none; } So, I have attr_box01 and attr_box02 displaying images that change with their value (from 0 to 4). And then I have an image that changes according to the value (from 0 to 8) of an attr_sum which is to be defined elsewhere, but this only works if attr_sum is a non-disabled input. So I'm looking for a means by which to automatically translate the sum of attr_box01 and attr_box02 into a single value in a non-disabled input such that this value updates every time attr_box01 or attr_box02 does so that the correct image is displayed by sheet-prshow.

Diagnosing issues with CSS is very hard without seeing the complete HTML and CSS; you have to know where all the divs are, and where the inputs are in relation to each other. I tested your code, and in an empty sheet, with just some tweaked version of what you have posted, it is working fine. Here's the code I tested: HTML < input   type= "number"   name= "attr_pb01"   value= "0" > < input   type= "number"   name= "attr_pb02"   value= "0" > < input   type= "number"   name= "attr_sum"   value= "0"  readonly > < div >      < input   class= "sheet-pr sheet-pr0"   type= "checkbox"   name= "attr_sum"   value= "0" > <!-- PR0 -->      < input   class= "sheet-pr sheet-pr1"   type= "checkbox"   name= "attr_sum"   value= "1" > <!-- PR1 -->      < input   class= "sheet-pr sheet-pr2"   type= "checkbox"   name= "attr_sum"   value= "2" > <!-- PR2 -->      < input   class= "sheet-pr sheet-pr3"   type= "checkbox"   name= "attr_sum"   value= "3" > <!-- PR3 -->      < input   class= "sheet-pr sheet-pr4"   type= "checkbox"   name= "attr_sum"   value= "4" > <!-- PR4 -->      < input   class= "sheet-pr sheet-pr5"   type= "checkbox"   name= "attr_sum"   value= "5" > <!-- PR5 -->      < input   class= "sheet-pr sheet-pr6"   type= "checkbox"   name= "attr_sum"   value= "6" > <!-- PR6 -->      < input   class= "sheet-pr sheet-pr7"   type= "checkbox"   name= "attr_sum"   value= "7" > <!-- PR7 -->      < input   class= "sheet-pr sheet-pr8"   type= "checkbox"   name= "attr_sum"   value= "8" > <!-- PR8 -->    < div   class= "sheet-prshow-PR0" > 0 </ div >    < div   class= "sheet-prshow-PR1" > 1 </ div >    < div   class= "sheet-prshow-PR2" > 2 </ div >    < div   class= "sheet-prshow-PR3" > 3 </ div >    < div   class= "sheet-prshow-PR4" > 4 </ div >    < div   class= "sheet-prshow-PR5" > 5 </ div >    < div   class= "sheet-prshow-PR6" > 6 </ div >    < div   class= "sheet-prshow-PR7" > 7 </ div >    < div   class= "sheet-prshow-PR8" > 8 </ div > </ div > I changed the contents of those DVs at the end, to show numbers, so I could see they are working without having to create a bunch of images. The first sum input (the readonly one) isn't necessary, I just wanted to display it in case the css wasn't working. You can remove that and everything still works. The sheet worker: on ( 'change:pb01 change:pb02' , ()  =>  {          getAttrs ([ 'pb01' ,  'pb02' ],  v =>  {              setAttrs ({                  sum:  (+ v . pb01  ||  0 ) + (+ v . pb02  ||  0 )             })         })     }); And the CSS from your last post    .charsheet   div [ class ^= "sheet-prshow" ] {      display :  none ;   }    .charsheet   input.sheet-pr0:checked  ~  div.sheet-prshow-PR0 ,    .charsheet   input.sheet-pr1:checked  ~  div.sheet-prshow-PR1 ,    .charsheet   input.sheet-pr2:checked  ~  div.sheet-prshow-PR2 ,    .charsheet   input.sheet-pr3:checked  ~  div.sheet-prshow-PR3 ,    .charsheet   input.sheet-pr4:checked  ~  div.sheet-prshow-PR4 ,    .charsheet   input.sheet-pr5:checked  ~  div.sheet-prshow-PR5 ,    .charsheet   input.sheet-pr6:checked  ~  div.sheet-prshow-PR6 ,    .charsheet   input.sheet-pr7:checked  ~  div.sheet-prshow-PR7 ,    .charsheet   input.sheet-pr8:checked  ~  div.sheet-prshow-PR8  {      display :  block ;   }    .charsheet   input.sheet-pr  {      width :  0px ;      height :  0px ;      opacity :  0 ;      display :  none ;   } With this set up everything works properly. Do you still have a copy of the sum attribute anywhere in your sheet that is disabled?