Hello, I'm building out a character sheet that uses a series of dots for skills, attributes, and a few other elements. I've used a variance of this base sheet before and everything's been fine, however on my new version, I have one attribute that won't behave - everything else continues to work as normal, so I'm baffled as to what's gone wrong with it. Normal skills etc range from 0-5 and you can set them to zero by hitting the x - so far, so straightforward: I've added a new trait that runs to 9 and made the standard changes to the HTML and CSS to get it working, and when I'm editing dots 1-9, it's perfect, however, when I attempt to reset it zero (a very important requirement for this attribute), it makes it appear as though all 9 dots are selected (if you roll it, it rolls zero dice, so the trait is working, but the sheet itself looks misleading). ddd <div class="dots curse-dots">
<input type="hidden" name="attr_curse" class="dot" value="0" />
<button type="action" name="act_curse_0" class="dot zero-dot">
<span class="checked">x</span>
</button>
<button type="action" name="act_curse_1" class="dot">
<span class="checked"></span>
</button>
<button type="action" name="act_curse_2" class="dot gt-1">
<span class="checked"></span>
</button>
<button type="action" name="act_curse_3" class="dot gt-1 gt-2">
<span class="checked"></span>
</button>
<button type="action" name="act_curse_4" class="dot gt-1 gt-2 gt-3">
<span class="checked"></span>
</button>
<button type="action" name="act_curse_5" class="dot gt-1 gt-2 gt-3 gt-4">
<span class="checked"></span>
</button>
<button type="action" name="act_curse_6" class="dot gt-1 gt-2 gt-3 gt-4 gt-5">
<span class="checked"></span>
</button>
<button type="action" name="act_curse_7" class="dot gt-1 gt-2 gt-3 gt-4 gt-5 gt-6">
<span class="checked"></span>
</button>
<button type="action" name="act_curse_8" class="dot gt-1 gt-2 gt-3 gt-4 gt-5 gt-6 gt-7">
<span class="checked"></span>
</button>
<button type="action" name="act_curse_9" class="dot gt-1 gt-2 gt-3 gt-4 gt-5 gt-6 gt-7 gt-8">
<span class="checked"></span>
</button> const characteristicValues = ["0","1","2","3","4","5","6","7","8","9"]; and this is the CSS: /* Style the dots */ .dots { display: flex; align-items: center; } /* Configure the button styling to make it look like a radio button. */ button.dot { padding: 0; border: solid 1px #a8a8a8; cursor: pointer; width: 14px; height: 14px; border-radius: 50%; display: flex; justify-content: center; align-items: center; } button.dot > span { width: 6px; height: 6px; border-radius: 50%; background: buttontext; } button.zero-dot > span { width: auto; height: auto; background: none; } /* Hide the "checked" section of the radio if the hidden attribute value is greater than the button value */ input.dot[value="0"] ~ button.gt-0 > span.checked { display: none; } input.dot[value="1"] ~ button.gt-1 > span.checked { display: none; } input.dot[value="2"] ~ button.gt-2 > span.checked { display: none; } input.dot[value="3"] ~ button.gt-3 > span.checked { display: none; } input.dot[value="4"] ~ button.gt-4 > span.checked { display: none; } input.dot[value="5"] ~ button.gt-5 > span.checked { display: none; } input.dot[value="6"] ~ button.gt-6 > span.checked { display: none; } input.dot[value="7"] ~ button.gt-7 > span.checked { display: none; } input.dot[value="8"] ~ button.gt-8 > span.checked { display: none; } input.dot[value="9"] ~ button.gt-9 > span.checked { display: none; } Anyway, I'm a little confused why my longstanding attributes work and appear correctly, but this new one doesn't - any ideas?
