for the sheet worker first, you dont need to get the max_enc_exceeded - you'll be calculating and overwriting it so no need to get its old score. is 'encumbrance' the total load? I'm operating under that assumption. Since you are calculating it here, you dont need to get it. I've added an imaginary 'load_capacity' stat - this is the characters enc_limit. You'll need to replace that with however its calculated in your sheet. // When a hidden ENCUMBRANCE field's value changes, update the character's overall encumbrance...
on('change:load_capacity change:encarmor change:encweapons change:encequipment', function(eventInfo) {
getAttrs (['load_capacity', 'encarmor', 'encweapons', 'encequipment'], function(values) {
const output = {};
const enc_limit = parseInt(values.load_capacity) || 0;
cont enc = (parseInt(values.encarmor) || 0) + (parseInt(values.encweapons) || 0) + (parseInt(values.encequipment) || 0);
output['encumbrance'] = enc;
output['max_enc_exceeded'] = (enc > enc_limit) ? 1 : 0;
setAttrs(output);
});
}); since load_capacity doesnt exist unless you create it, load_capacity will be treated as 0, so max_enc_exceeded will always be 1, which is what we want for the test. Back the html and css. You need a class on the input whose color is to change. I moved the hidden input up so its easier to see. html ignores line breaks and white space generally, so you dont need to put them on the same line. <div>
<input type="hidden" class="enccheck" name="max_enc_exceeded" value="0"/>
<span>Encumbrance:</span> <input type="number" class="redtext" value="0" name="attr_encumbrance"/>
</div> I also give the hidden input a default value. This is generally a good idea. With the css, set a default value, then change it when the rule is true, like so: input.sheet-redtext {
color: black;
}
input.sheet-enccheck[value="1"] ~ input.sheet-redtext {
color: red;
} Try that. Also you can create a load_capacity stat, and give it various val;ues, to test the colour is changing.