Trouble with Universal Sheetworkers

I'm trying to make my sheetworker code more compact, since a lot of it are just the same three sheetworker slightly to the left. I used the Universal Sheetworkers page, as well as this code snippet as guidance, but in the end my code no longer worked and even after trying a few different things, I couldn't get it to work and now I'm at a loss. This is how the sheet workers looked like in the beginning, when everything still worked, and I had each of these three times a lot: const zehnerValues = ["1","2","3","4","5","6","7","8","9","10"]; const fuenferValues = ["1","2","3","4","5"]; on(`clicked:aufmerksamkeit-reset`, function() { setAttrs({ "aufmerksamkeit": 0 }); }); zehnerValues.forEach(function(value) { on(`clicked:koerperkraft-${value}`, function() { setAttrs({ "koerperkraft": value }); }); }); fuenferValues.forEach(function(value) { on(`clicked:aufmerksamkeit-${value}`, function() { setAttrs({ "aufmerksamkeit": value }); }); }); And this is how it looked like after I tried to do it as three universal sheet workers: const zehnerValues = ["1","2","3","4","5","6","7","8","9","10"]; const fuenferValues = ["1","2","3","4","5"]; const fertigkeitenListe = ["aufmerksamkeit", "ausweichen", "handgemenge", "nahkampf", "fernkampf", "sportlichkeit", "heimlichkeit", "ausdruck", "ausfluechte", "verhandeln", "einschuechtern", "empathie", "etikette", "fuehrungsqualitaeten", "wissen", "szenekenntnis", "nachforschungen", "handwerk", "tierkunde"]; const attributsListe = ["koerperkraft", "geschick", "widerstand", "charisma", "manipulation", "ausstrahlung", "wahrnehmung", "intelligenz", "geistesschaerfe"]; fertigkeitenListe.forEach(function(fert) { on(`clicked:reset-${fert}`, function() { setAttrs({ fert: 0 }); }); fuenferValues.forEach(function(fert) { on(`clicked:` + [fert + value].join(`-`), function() { setAttrs({ fert: value }); }); }); }); attributsListe.forEach(function(attri) { zehnerValues.forEach(function(value) { on(`clicked:` + [attri + value].join(`-`), function() { setAttrs({ attri: value }); }); }); }); I put the entire test code + css in a git repository: <a href="https://github.com/AmyLaPazza/dreamgate_charsheet" rel="nofollow">https://github.com/AmyLaPazza/dreamgate_charsheet</a>

Hi Amy, Welcome to the wonderful world of sheetworkers! Converting functions specific to a given event to universal sheetworkers can be a bit daunting. Here's some things I notice with your code snippet in your post: const zehnerValues = ["1","2","3","4","5","6","7","8","9","10"]; const fuenferValues = ["1","2","3","4","5"]; const fertigkeitenListe = ["aufmerksamkeit", "ausweichen", "handgemenge", "nahkampf", "fernkampf", "sportlichkeit", "heimlichkeit", "ausdruck", "ausfluechte", "verhandeln", "einschuechtern", "empathie", "etikette", "fuehrungsqualitaeten", "wissen", "szenekenntnis", "nachforschungen", "handwerk", "tierkunde"]; const attributsListe = ["koerperkraft", "geschick", "widerstand", "charisma", "manipulation", "ausstrahlung", "wahrnehmung", "intelligenz", "geistesschaerfe"]; fertigkeitenListe.forEach(function(fert) { on(`clicked:reset-${fert}`, function() {//It looks like you've changed around the button naming scheme from your previous version. Is this change also reflected in your html? setAttrs({ fert: 0//Here, you're actually setting an attribute named "fert" instead of whatever the value of fert is. }); }); fuenferValues.forEach(function(fert) {//You've duplicated the fert declaration here in the forum. I think you actually wanted value instead of fert on(`clicked:` + [fert + value].join(`-`), function() {//That would then make this make a little more sense. However, I don't think you want to join an array here. There's a better way that I'll demonstrate further down. setAttrs({ fert: value//same issue as in your previous setAttrs }); }); }); }); attributsListe.forEach(function(attri) { zehnerValues.forEach(function(value) { on(`clicked:` + [attri + value].join(`-`), function() {//this array join is also not how I think you want to do this. setAttrs({ attri: value//same issue as in your previous setAttrs }); }); }); }); How I'd write this is the following: const zehnerValues = ["1","2","3","4","5","6","7","8","9","10"]; const fuenferValues = ["1","2","3","4","5"]; const fertigkeitenListe = ["aufmerksamkeit", "ausweichen", "handgemenge", "nahkampf", "fernkampf", "sportlichkeit", "heimlichkeit", "ausdruck", "ausfluechte", "verhandeln", "einschuechtern", "empathie", "etikette", "fuehrungsqualitaeten", "wissen", "szenekenntnis", "nachforschungen", "handwerk", "tierkunde"]; const attributsListe = ["koerperkraft", "geschick", "widerstand", "charisma", "manipulation", "ausstrahlung", "wahrnehmung", "intelligenz", "geistesschaerfe"]; fertigkeitenListe.forEach(function(fert) { on(`clicked:reset-${fert}`, function() { const setObj = {};//This will be our accumulator for changes. For simple reactions like what you're coding, this isn't truly necessary, but using an object to store the attributes to be set makes it easier to dynamically set them. setObj[fert] = 0;//This is how you dynamically set a key:value pair in an object. Note that you can also do setObj['some-text'] or even use template literals to dynamically assemble an attribute name to set like so; setObj[`${fert}-${value}`]=0; setAttrs(setObj);//then just use the assembled setObj as the object for setAttrs to set attribute values with. }); fuenferValues.forEach(function(value) { on(`clicked:${fert}-${value}`, function() {//you were already using template literals in the previous listener. I've just expanded them to be used here as well. const setObj = {}; setObj[fert]=value;//This is how you dynamically refer to a key in an object setAttrs(setObj); }); }); }); attributsListe.forEach(function(attri) { zehnerValues.forEach(function(value) { on(`clicked:${attri}-${value}`, function() { const setObj = {}; setObj[attri]=value; setAttrs(setObj); }); }); }); I'm horrible at comments, so let me know if anything doesn't make sense.

Oh, wow, yeah, it seems like I got sloppy while copying the code. The changed button naming scheme was part of my attempts to figure out how to make it work and were reflected in the html of my test document, but not the "official" one where I copied the "before"-code from. It works properly again know. Your comments and changed code were really helpful, thank you so much!

Glad it worked for you!