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

Updating editable input from a calculated input

I have a calculated input like this: <input type="number" name="attr_sum1" value="(@{pb1}+@{pb2})" disabled="true" /> And I need to get the result into a non-disabled input so that it will trigger something else. So I created a second input like so: <input type="number" name="attr_sum2" value="0" /> Then a script worker to change sum2 whenever sum1 changed:     on("change:sum1", function () {     getAttrs(['sum1'], function(values) {         const sum3 = {            0: {p: "0",},            1: {p: "1",},            2: {p: "2",},            3: {p: "3",},            4: {p: "4",},            5: {p: "5",},            6: {p: "6",},            7: {p: "7",},            8: {p: "8",},            9: {p: "9",},            10: {p: "10",},        };         let sum1 = values.sum1;                 setAttrs({             "sum2": sum3[sum1].p         });     }); }); But this doesn't work. Can someone put me right? Or provide a better method?
1628337528
GiGs
Pro
Sheet Author
API Scripter
Sheet workers don't interact well with disabled inputs. They don't see the calculated value, they see the text "(@{pb1}+@{pb2})" which means nothing in the context of a sheet worker. You'd be better off using a sheet worker to calculate sum1 value. If sum2 is meant to an exact copy of sum1, just put a copy of sum1 there. You can have the same attribute in multiple places  in your sheet. Your sheet worker seems unneccesarily complicated. You could just do this: on("change:sum1", function () {     getAttrs(['sum1'], function(values) {         setAttrs({             "sum2": values.sum1         });     }); }); This wont work in this case, because sheet workers dont work with disabled inputs, but for the other situations, if you just want to copy an attribute value, you can just set one attribute to the value of another.
1628337932

Edited 1628337984
GiGs
Pro
Sheet Author
API Scripter
Having reread your first post, I see you want to trigger something when sum1 changes. Is this for another sheet worker? If so your only option is to create sum1 with a sheet worker. Assuming pb1 and pb2 are not disabled attributes, you can do: on("change:pb1 change:pb2", function () {     getAttrs(['pb1', 'pb2'], function(values) {         let pb1 = +values.pb1 || 0;                 let pb2 = +values.pb2 || 0;         setAttrs({             sum1: pb1 + pb2         });     }); }); But if either pb1 or pb2 are disabled inputs, you'll need to use sheet workers to calculate their values first, so that this sheet worker can work.
Thanks for the thorough reply. I tried giving the non-disabled input the same name as the disabled one, but this doesn't seem to work – they remain independent. The actual calculation I'm doing is rather more complicated and script workers are still a bit beyond me, so I could really use some help there. The calculation is: (floor((@{pb01}+@{pb02}+@{pb03}+@{pb04}+@{pb05}+@{pb06}+@{pb07}+@{pb08}+@{pb09}+@{pb10})/4)) What would that be in script-worker-lingo?
1628339626

Edited 1628340880
GiGs
Pro
Sheet Author
API Scripter
Rich K. said: Thanks for the thorough reply. I tried giving the non-disabled input the same name as the disabled one, but this doesn't seem to work – they remain independent. Unfortunately that wont work. You have to build it with a sheet worker to get events to respond to it. Your calculation is just as easy (if laborious) to writing a sheet worker. Just extend from pb04 to pb10 on the first 2 lines here: on("change:pb01 change:pb02 change:pb03 change:pb04", function () {     getAttrs(['pb01', 'pb02', pb03, 'pb04'], function(v) {          let sum = v => Object . values (v). reduce ( ( a, b ) => a + (+b || 0));         let calc = Math.floor(sum / 4);         setAttrs({             sum1: calc         });     }); }); The sumValues line is complex, but is just the same as writing let sum = (+v.pb01 || 0) + (+v.pb02 || 0) +(+v.pb03 || 0) +(+v.pb04 || 0) +(+v.pb05 || 0) /* and so on up to 10 */ ; Each attribute is wrapped in this structure: (+v.attribute || 0) because attributes are stored as strings, and you have to convert them into numbers to do arithmetic with them - and this is an efficient structure to do that, while avoiding errors.
Still not working I'm afraid, but maybe I've misunderstood something somewhere. What I'm running is: <input type="number" name="attr_sum1"  /> <script type="text/worker"> on("change:pb-01 change:pb-02 change:pb-03 change:pb-04 change:pb-05 change:pb-06 change:pb-07 change:pb-08 change:pb-09 change:pb-10", function () {     getAttrs(['pb-01', 'pb-02', 'pb-03', 'pb-04', 'pb-05', 'pb-06', 'pb-07', 'pb-08', 'pb-09', 'pb-10'], function(v) {         let sum = v => Object.values(v).reduce((a, b) => a + (+b || 0));         let calc = Math.floor(sumValues / 4);         setAttrs({             sum1: calc         });     }); }); </script> The input doesn't change with the pb-xx attributes. I wondered if sum = v should be sum1 = v, but that wasn't it. I forgot to mention the hyphens in the attribute names, could that be the problem?
1628342507

Edited 1628342587
GiGs
Pro
Sheet Author
API Scripter
I made a mistake in my original post, and corrected it - but not fast enough. See these two lines:         let sum = v => Object.values(v).reduce((a, b) => a + (+b || 0));         let calc = Math.floor(sumValues / 4); The sumValues on the second line should be sum. The hyphens wouldn't make a difference in this case. I recommend not using hyphens in attribute names, because there are situations in sheet workers where it can cause a problem - but it won't affect this one.
Amazing! I needed to replace  let sum = v => Object.values(v).reduce((a, b) => a + (+b || 0)); line with ten of these         let pb1 = +values.pb1 || 0;  and that's done the trick. Thank you so much ! (Again!) Aaaaaand now for the bonus question: It would be super helpful to use this on my cycling radio buttons, but it doesn't seem to work for them. What I have is:             <div class="sheet-clock">     <input type="radio" class="sheet-clock sheet-b0" name="attr_clock01" value="0" checked>     <input type="radio" class="sheet-clock sheet-b1" name="attr_clock01" value="1">     <input type="radio" class="sheet-clock sheet-b2" name="attr_clock01" value="2">     <input type="radio" class="sheet-clock sheet-b3" name="attr_clock01" value="3">     <input type="radio" class="sheet-clock sheet-b4" name="attr_clock01" value="4">     <span class="sheet-clock sheet-b0"><input background:url(...);" type='text' disabled='true' name='attr_main' /></span>     <span class="sheet-clock sheet-b1"><input background:url(...);" type='text' disabled='true' name='attr_main' /></span>     <span class="sheet-clock sheet-b2"><input background:url(...);" type='text' disabled='true' name='attr_main' /></span>     <span class="sheet-clock sheet-b3"><input background:url(...);" type='text' disabled='true' name='attr_main' /></span>     <span class="sheet-clock sheet-b4"><input background:url(...);" type='text' disabled='true' name='attr_main' /></span>             </div> With CSS: div.sheet-clock {     width: 77px;     height: 77px;     position: relative;     border-color: transparent; } input.sheet-clock {     width: 77px;     height: 77px;     position: absolute;     z-index: 1;     opacity: 0%;     border-color: transparent; } span.sheet-clock {     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; } Now this doesn't like disabled inputs either, so I figure it also needs a script worker. Why doesn't the script worker like attr_clock01? Is there a workaround?
1628354057
GiGs
Pro
Sheet Author
API Scripter
I see in issue with my code, but its too late to test it now. This let sum = v => Object.values(v).reduce((a, b) => a + (+b || 0)); should probably be let sum = Object.values(v).reduce((a, b) => a + (+b || 0)); For your CSS question, I dont really follow that code - you might be better of creating a new thread with CSS in the title so you know people who specialised in that will see it. That said, this syntax looks off: <input background:url(...);" type='text' disabled='true' name='attr_main' /> Have you cut part of it out for brevity? The background: url part would be better off in a class, and that single quote after the semi-colon looks like it could wreak havoc with your sheet. Also the fact there are five identical copies of that attribute, with no values set, makes me wonder what it's for.
Oops, yes it was meant to be: <input style="background:url(...);" type='text' disabled='true' name='attr_main' /> With the ... standing in for various links to images. The five values for the attribute is to produce the cycling effect. Only one image is displayed at any one time and each click changes it to the next one, using the values as a means of defining the order. (I'm not 100% clued up on the science myself, quelle surprise). I'll re-post as you advise. Again, many thanks for all your help.
It turns out you had fixed this for me last time but there was a tiny syntax error that I didn't spot (extra semi-colons in the sheet worker). Working perfectly now. Thanks again!!
1628429957

Edited 1628430449
GiGs
Pro
Sheet Author
API Scripter
You're welcome. And I just had that double semi-colon problem in unrelated project this morning, lol.