Two Problems with my Stress Boxes

I'm trying to make stress boxes that change when you click on them. Right now, both symbols are displaying and the value isn't changing from 0. Here's my code:  HTML: <button class="stress" name="act_stress1" ><span class = "pic1">k</span><span class="pic1_check">*</span></button>         <input type="hidden" class="toggle1" value="0" name="attr_stress1_flag" />         <button class="stress" name="act_stress2" ><span class = "pic2">k</span><span class="pic2_check">*</span></button>         <input type="hidden" class="toggle2" value="0" name="attr_stress2_flag" />         <button class="stress" name="act_stress3" ><span class = "pic3">k</span><span class="pic3_check">*</span></button>         <input type="hidden" class="toggle3" value="0" name="attr_stress3_flag" />         <button class="stress" name="act_stress4" ><span class = "pic4">k</span><span class="pic4_check">*</span></button>         <input type="hidden" class="toggle4" value="0" name="attr_stress4_flag" />         <button class="stress" name="act_stress5" ><span class = "pic5">k</span><span class="pic5_check">*</span></button>         <input type="hidden" class="toggle5" value="0" name="attr_stress5_flag" />         <button class="stress" name="act_stress6" ><span class = "pic6">k</span><span class="pic6_check">*</span></button>         <input type="hidden" class="toggle6" value="0" name="attr_stress6_flag" />         <button class="stress" name="act_stress7" ><span class = "pic7">k</span><span class="pic7_check">*</span></button>         <input type="hidden" class="toggle7" value="0" name="attr_stress7_flag" />         <button class="stress" name="act_stress8" ><span class = "pic8">k</span><span class="pic8_check">*</span></button>         <input type="hidden" class="toggle8" value="0" name="attr_stress8_flag" />         <button class="stress" name="act_stress9" ><span class = "pic9">k</span><span class="pic9_check">*</span></button>         <input type="hidden" class="toggle9" value="0" name="attr_stress9_flag" />         <button class="stress" name="act_stress10" ><span class = "pic10">k</span><span class="pic10_check">*</span></button>         <input type="hidden" class="toggle10" value="0" name="attr_stress10_flag" /> Javascript:   const toggleList = ["stress1", "stress2","stress3","stress4","stress5","stress6","stress7","stress8","stress9","stress10"];     togglelist.forEach(toggle => {         on(`clicked:${toggle}`, function() {             const flag = `${toggle}_flag`;             getAttrs([flag], function(v) {                 setAttrs({                     [flag]: v[flag] !== "1" ? "1" : "0"                 });             });         });     }); CSS: .charsheet .toggle1[value=1] ~ .pic1,  .charsheet .toggle2[value=1] ~ .pic2,  .charsheet .toggle3[value=1] ~ .pic3,  .charsheet .toggle4[value=1] ~ .pic4.  .charsheet .toggle5[value=1] ~ .pic5,  .charsheet .toggle6[value=1] ~ .pic6,  .charsheet .toggle7[value=1] ~ .pic7,  .charsheet .toggle8[value=1] ~ .pic8,  .charsheet .toggle9[value=1] ~ .pic9,  .charsheet .toggle10[value=1] ~ .pic10{     display:none; }  .charsheet .toggle1[value=0] ~ .pic1_checked,  .charsheet .toggle2[value=0] ~ .pic2_checked,  .charsheet .toggle3[value=0] ~ .pic3_checked,  .charsheet .toggle4[value=0] ~ .pic4_checked,  .charsheet .toggle5[value=0] ~ .pic5_checked,  .charsheet .toggle6[value=0] ~ .pic6_checked,  .charsheet .toggle7[value=0] ~ .pic7_checked,  .charsheet .toggle8[value=0] ~ .pic8_checked,  .charsheet .toggle9[value=0] ~ .pic9_checked,  .charsheet .toggle10[value=0] ~ .pic10_checked{     display:none; } Any ideas? 

You need to put the input before the thing it changes. Also, you'll need to put it inside the button. So like this: <button class="stress" name="act_stress1" >        <input type="hidden" class="toggle1" value="0" name="attr_stress1_flag" /> <span class = "pic1">k</span> <span class="pic1_check">*</span> </button> Optionally, you can simplify the CSS by changing class names. Your HTML would be like <button class="stress" name="act_stress1" >        <input type="hidden" class="toggle" value="0" name="attr_stress1_flag" /> <span class="pic">k</span> <span class="pic_check">*</span> </button> <button class="stress" name="act_stress2" >        <input type="hidden" class="toggle" value="0" name="attr_stress2_flag" /> <span class="pic">k</span> <span class="pic_check">*</span> </button> And CSS would look like (this replaces ALL the CSS above) .charsheet .toggle[value="1"] ~ .pic, .charsheet .toggle[value="0"] ~ .pic_checked {     display:none; } This is because the CSS works only within its current scope - inside its own button.

I just noticed you said the value isn't changing. That suggests there's an issue with yiur sheet worker. I'll look at that after supper. My previous post should fix the CSS, and you can manually change the hidden values in the attributes tab to see if its working.

Ok, here's what I've got now:  html:  <button class="stress" name="act_stress1" >             <input type="hidden" class="toggle" value="0" name="attr_stress1_flag" />             <span class = "pic">k</span>             <span class="pic_check">*</span>         </button>         <button class="stress" name="act_stress2" >             <input type="hidden" class="toggle" value="0" name="attr_stress2_flag" />             <span class="pic">k</span>             <span class="pic_check">*</span>         </button>         <button class="stress" name="act_stress3" >             <input type="hidden" class="toggle" value="0" name="attr_stress3_flag" />             <span class="pic">k</span>             <span class="pic_check">*</span>         </button>         <button class="stress" name="act_stress4" >             <input type="hidden" class="toggle" value="0" name="attr_stress4_flag" />             <span class="pic">k</span>             <span class="pic_check">*</span>         </button>         <button class="stress" name="act_stress5" >             <input type="hidden" class="toggle" value="0" name="attr_stress5_flag" />             <span class="pic">k</span>             <span class="pic_check">*</span>         </button>         <button class="stress" name="act_stress6" >             <input type="hidden" class="toggle" value="0" name="attr_stress6_flag" />             <span class="pic">k</span>             <span class="pic_check">*</span>         </button>         <button class="stress" name="act_stress7" >             <input type="hidden" class="toggle" value="0" name="attr_stress7_flag" />             <span class="pic">k</span>             <span class="pic_check">*</span>         </button>         <button class="stress" name="act_stress8" >             <input type="hidden" class="toggle" value="0" name="attr_stress8_flag" />             <span class="pic">k</span>             <span class="pic_check">*</span>         </button>         <button class="stress" name="act_stress9" >             <input type="hidden" class="toggle" value="0" name="attr_stress9_flag" />             <span class="pic">k</span>             <span class="pic_check">*</span>         </button>         <button class="stress" name="act_stress10" >             <input type="hidden" class="toggle" value="0" name="attr_stress10_flag" />             <span class="pic">k</span>             <span class="pic_check">*</span>         </button>         <input name="attr_health" disabled="true" type="number" class="number" value="10"> css:  .charsheet .toggle[value="1"] ~ .pic, .charsheet .toggle[value="0"] ~ .pic_checked {     display:none; } Javascript:  const toggleList = ["stress1", "stress2","stress3","stress4","stress5","stress6","stress7","stress8","stress9","stress10"];     toggleList.forEach(toggle => {         on(`clicked:${toggle}`, function() {             flag = `${toggle}_flag`;             getAttrs([flag], ["health"] , function(v) {                 healthset = v[flag] !== "1" ? "-1" : "1";                 setAttrs({                     health: v.health+healthset                 });                 setAttrs({                     flag: v[flag] !== "1" ? "1" : "0"                 });             });         });     }); Nothing is changing, and both the k and the * are visible. 

Do you have the sheet worker inside a script block, like <script type="text/worker">     // sheet worker here </script> ? Also you should remove the disabled tag from health - sheet workers cannot change disabled inputs.

Ah. That makes sense. And yes, it's in a script block. 

The other scripts I have work just fine. 

Aha, figured it out. First things though: never add extra code to something that isn't working. You have a syntax error in the new code that would cause a separate crash, so even if the problem with the original code was discovered, the worker would still be crashing. This severely complicates fixing problems. First things first. The HTML for your buttons include an error- this took forever for me to spot, so don't feel bad about missing it. This line: <button class="stress" name="act_stress1" > should be <button type="radio" class="stress" name="act_stress1" > With buttons, you always have to state the type, action or roll. (Given that the name also includs the type, this seems kinda redundant to me, but we have to do it.) The worker before adding health, should be this: const toggleList = ["stress1", "stress2","stress3","stress4","stress5","stress6","stress7","stress8","stress9","stress10"]; togglelist.forEach(toggle => {         on(`clicked:${toggle}`, function() {             const flag = `${toggle}_flag`;             getAttrs([flag], function(v) {                 setAttrs({                     [flag]: v[flag] !== "1" ? "1" : "0"                 });             });         });     }); Notice the brackets around flag in setAttrs - that is essential.That is because flag is not the literal attribute called flag, it is a dynamic value. Putting the brackets around it forces the sheetworker to evaluate it. I also added const flag at the start, because you should declare variables properly (you can use const, let, or var). I don't know if it'll work without that.

For your health adding, I would suggest doing it slightly differently. But if you were combining them in the same worker, the getAttrs line would have to be changed to avoid failure: getAttrs([flag, "health"] , function(v) { And the setAttrs sections don't need to be changed, but would be more efficient written like this: setAttrs({                     health: v.health+healthset,                     [flag]: v[flag] !== "1" ? "1" : "0" }); You can include any number of attribute statements in the same setAttrs function, as long as they are separated by commas. This is how I'd personally do that: const toggleList = ["stress1", "stress2","stress3","stress4","stress5","stress6","stress7","stress8","stress9","stress10"]; togglelist.forEach(toggle => {         on(`clicked:${toggle}`, function() {             const flag = `${toggle}_flag`;             getAttrs([flag], function(v) {                 setAttrs({                     [flag]: v[flag] !== "1" ? "1" : "0"                 });             });         }); }); on(togglelist.map(toggle => `change:${toggle}_flag`).join(' '),function() { getAttrs(toggleList, function(v) { let sum = 0; togglelist.forEach(toggle => { sum += (Number(toggle) || 0); }); setAttrs({health: sum}); }); }); This treats the entire set of 10 stress boxes as a single unit, and adds all 10 whenever any of them change. (I lied - it's not exactly how I'd do it, but it's an understandable and explainable approach!).

Ok, I've got this now:  html: <button type="radio" class="stress" name="act_stress1" >             <input type="hidden" class="toggle" value="0" name="attr_stress1_flag" />             <span class = "pic">k</span>             <span class="pic_check">*</span>         </button>         <button type="radio" class="stress" name="act_stress2" >             <input type="hidden" class="toggle" value="0" name="attr_stress2_flag" />             <span class="pic">k</span>             <span class="pic_check">*</span>         </button>         <button type="radio" class="stress" name="act_stress3" >             <input type="hidden" class="toggle" value="0" name="attr_stress3_flag" />             <span class="pic">k</span>             <span class="pic_check">*</span>         </button>         <button type="radio" class="stress" name="act_stress4" >             <input type="hidden" class="toggle" value="0" name="attr_stress4_flag" />             <span class="pic">k</span>             <span class="pic_check">*</span>         </button>         <button type="radio" class="stress" name="act_stress5" >             <input type="hidden" class="toggle" value="0" name="attr_stress5_flag" />             <span class="pic">k</span>             <span class="pic_check">*</span>         </button>         <button type="radio" class="stress" name="act_stress6" >             <input type="hidden" class="toggle" value="0" name="attr_stress6_flag" />             <span class="pic">k</span>             <span class="pic_check">*</span>         </button>         <button type="radio" class="stress" name="act_stress7" >             <input type="hidden" class="toggle" value="0" name="attr_stress7_flag" />             <span class="pic">k</span>             <span class="pic_check">*</span>         </button>         <button type="radio" class="stress" name="act_stress8" >             <input type="hidden" class="toggle" value="0" name="attr_stress8_flag" />             <span class="pic">k</span>             <span class="pic_check">*</span>         </button>         <button type="radio" class="stress" name="act_stress9" >             <input type="hidden" class="toggle" value="0" name="attr_stress9_flag" />             <span class="pic">k</span>             <span class="pic_check">*</span>         </button>         <button type="radio" class="stress" name="act_stress10" >             <input type="hidden" class="toggle" value="0" name="attr_stress10_flag" />             <span class="pic">k</span>             <span class="pic_check">*</span>         </button> css:  .charsheet .toggle[value="1"] ~ .stress {     all: initial;     background-color: green;     font-family: Pictos;     color: #b8d1b9;      font-size:25px;] } .charsheet .toggle[value="1"] ~ .pic, .charsheet .toggle[value="0"] ~ .pic_checked {     display:none; } The javascript is still the same as what you posted. It's, ummm, still not working. 

What isn't working? Did you test the code I provided, and is that working? In your CSS, this line looks iffy: } .charsheet .toggle[value="1"] ~ .pic, Shouldn't that be } .charsheet .toggle[value="1"] ~ .pic,

Yup, that appears to be what isn't working. 

Specifically, the value isn't changing. 

Just got it to toggle. 

Stupid capital letters.