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 .
×
Advertisement Create a free account

Conditions If/Else in character sheet

Hi! I'm totally noobie in making character sheet (and HTML/CSS/Javascript in general) but i'm trying to make a Zombicide Chronicle character sheet for my game. I'm pretty happy with it so far but I have one little problem... I wanted to know if the condition if/else is working on roll20. i have that : on("change:Skill_Blue", function() {       getAttrs(["Skill_Blue"], function(values) {         let blue = values.Skill_Blue;         if (blue=="Hoard"){             setAttrs({                 "hasHoard": "1";             });         }else{             setAttrs({                                             "hasHoard": "0";             });         };     }); }); but I don't know how to make it work... I know that if i can make it work, I'll be able to make the hasHoard attribute being 1 with more input from Skill_Blue, Yellow, Orange and Red. So... Help me please!! :p Thanks!
1627357131
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
The problem that is stopping your sheetworker is that event listeners must be all lowercase. In fact the best practice is to have all attributes be lowercase, and use underscores to separate words. This is called snake case. There's a few other critiques I'll post tomorrow when I'm not on mobile.
1627375445
GiGs
Pro
Sheet Author
API Scripter
Here's a version of the sheet worker that should work. on ( "change:skill_blue" ,  function () {        getAttrs ([ "skill_blue" ],  function ( values ) {          let   blue  =  values . skill_blue ;          let   output  ={};                   if  ( blue  ===  "Hoard" ){              output . hasHoard  =  1 ;         } else {              output . hasHoard  =  0 ;         }          setAttrs ( output );     }); }); Note that your if statement had a semi-colon ending it - you never do that with if statements. Notice I've put all the attributes in lower case. It doesn't matter what case you've used on the HTML to define them, its best in sheet workers to use all lower case. Likewise I've used a === instead of == in the if comparison - a double equality is very permissive about what it accepts, and === is more precise and can avoid small errors that are hard to detect (in practice, it is unlikely to matter in sheet workers, but it's still better to be safe). Notice instead of having multiple setAttrs in each branch of the if statement, I've instead created a variable output to save the attributes in, and just one sheet worker saves them to the sheet at the end. This is much more efficient and helps avoid lag in your sheets - especially if, as your OP suggests, you plan to add extra stats in there which might lead to extra setAttrs statements. Better to nip that in the bud now. Finally your if statement could be replaced by a ternary operator, like so         output.hasHoard = (blue === "Hoard") ? 1 : 0; This is a great way to replace if statements with just two options. The format is         variableToSet = (if statement) ? value if true : value if false;  Notice it's divided by an =, an ?, and a :. Your if statement after the = sign, the true result after the ?, and the false result after the : If you're just choosing between two values, this is much more compact than an if/else block.
1627391342
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
Heh, Gigs hit the critique I was going to give. Although, personally I'm split on ternary operators. I use them, but I do think ifs are often easier to read.
1627401642

Edited 1627402691
Thanks for your help! I figured out something which will work for my game this Thurday but i think I'll rework it after. I a real noob in HTML/CSS/Javascript so I think i will have to rework it A LOT if i want the community to be able to use it in their game^^' To have a look at what I came up with : on("change:Skill_Blue change:Skill_Yellow1 change:Skill_Yellow2 change:Skill_Orange1 change:Skill_Orange2 change:Skill_Red1 change:Skill_Red2 change:Skill_Red3", function() { getAttrs(["Skill_Blue","Skill_Yellow1","Skill_Yellow2","Skill_Orange1","Skill_Orange2","Skill_Red1","Skill_Red2","Skill_Red3"], function(values) { let blue = values.Skill_Blue; let yellow1 = values.Skill_Yellow1; let yellow2 = values.Skill_Yellow2; let orange1 = values.Skill_Orange1; let orange2 = values.Skill_Orange2; let red1 = values.Skill_Red1; let red2 = values.Skill_Red2; let red3 = values.Skill_Red3; if (blue==="Hoard"||yellow1==="Hoard"||yellow2==="Hoard"||orange1==="Hoard"||orange2==="Hoard"||red1==="Hoard"||red2==="Hoard"||red3==="Hoard"){ setAttrs({ "hasHoard": "1" }); } else { setAttrs({ "hasHoard": "0" }); }; }); }); But yes 'll change all attribute in lower case and try to rewrite my page structure because I think i used some table where it wasn't necessary...
1627420102
GiGs
Pro
Sheet Author
API Scripter
I'd recommend reorganising your worker as suggested earlier, but there's one thing you absolutely must change: n("change:Skill_Blue change:Skill_Yellow1 change:Skill_Yellow2 change:Skill_Orange1 change:Skill_Orange2 change:Skill_Red1 change:Skill_Red2 change:Skill_Red3", function() { In this line, regardless of what else you do, you must change all the attribute names to lower class. It doesn't matter if they aren't lower class in the HTML, they must always be on this line. If you don't do this, your worker will work inconsistently, and often wont work at all.