Relying solely on html/css is going to require a lot of css declarations. This is certainly doable, but if xp has a large, or infinite, number of possible values it won't really be feasible. Instead, I'd recommend a sheetworker driven solution so that you can cut down on the number of css declarations needed: HTML <span>XP</span>
<input type='number' name='attr_xp' value='0'>
<span>Some Skill Name</span>
<input name='attr_skill_name' type='number' value='0'>
<input class='skill-add-control' type='hidden' name='attr_skill_name_add_control' value='0'><!--You'll need one of these for each of your skills-->
<button class='skill-add' type='action' name='act_add-skill-name'>+</button><!--You'll actually need to style this as you want, I'm just doing the skeleton structure here. Also, note that if you are going to do this in a repeating section, the action button name can't have any underscores in it (other than the one following the "act" keyword of course)--> CSS .sheet-skill-add-control:not([value="1"]) + .sheet-skill-add{
display:none;
} Javascript (in <script> tag on html page) let skillNames = ['skill_name'];
on('change:xp',(event)=>{
const setObj = {};
getAttrs(skillNames,(attrArray)=>{
_.each(skillNames,(skill)=>{
let nextLevel = attrArray[skill]*1 + 1;
if(event.newValue*1 >= nextLevel){
setObj[`${skill}_add_control`] = 1;
}else{
setObj[`${skill}_add_control`] = 0;
}
});
setAttrs(setObj,{silent:true});
});
});
on(`clicked:add-${skillNames.join(' clicked:add-').replace(/_/g,'-')}`,(event)=>{
console.log(event);
let skillName = event.triggerName.replace(/^clicked:add-/,'').replace(/\-/g,'_');
getAttrs(['xp',...skillNames],(attrArray)=>{
const setObj = {};
let nextLevel = attrArray[skillName]*1 + 1;
setObj[skillName]=nextLevel;
setAttrs({xp: attrArray.xp - nextLevel});//Will trigger the on change above. Cascading setAttrs and getAttrs like this is not the preferred method. I'm only doing it here for a quick demo.
setAttrs(setObj,{silent:true});
});
}); Note that I've only done one skill here, but this is extensible to any number of skills by simply adding them to the skillNames array at the top of the javascript and maintaining the same skill naming scheme demonstrated in the html above. EDIT: Removed extraneous console.logs EDIT 2: Simplified CSS
