Testing for a condition when the attribute does not exist and a default value is being used.

I have some code that looks similar to this (it's been simplified) <select name="attr_T_Special" class="txtShort"> <option value="None" selected title="No modifiers at all.">None</option> <option value="Initiative" title="This is ...">Initiative</option> <option value="Recovery" title="This is ...">Recovery</option> </select> <input class="hidden testChecked" name="attr_T_Special" type="checkbox" value="None"/> <button class="text-button button-nodice HideIfNotChecked" name="roll_T_btnCorruptKarma" type="roll" , etc. The purpose of testChecked and HideIfNotChecked is to see if "T_Special" has been set to "None", and if it has not, hide the button.  It works fine if the user selects one of the other values, and then sets it back to None.  But in it's initial state, when the drop down list has not been touched and the DDL is showing None only because it is the default value, it is not working.  In this one particular case, I think I could by default hide the button, and set it to UnhideIfChecked, but that will not work out very conveniently for other use instances.  Is there any way to test the condition of an attribute that is still at it's default value? ie: it does not yet have an actual value in the attributes and abilities section?

That's something I've run into occassionally. Doing styling based on the value of a select is not very reliable. Instead, I'd recommend adding this:          <input type='hidden' value="None" name='attr_T_Special'> <select name="attr_T_Special" class="txtShort"> <option value="None" selected title="No modifiers at all.">None</option> <option value="Initiative" title="This is ...">Initiative</option> <option value="Recovery" title="This is ...">Recovery</option> </select> <input class="hidden testChecked" name="attr_T_Special" type="checkbox" value="None"/> <button class="text-button button-nodice HideIfNotChecked" name="roll_T_btnCorruptKarma" type="roll" , etc. Then, you can just base the styling off the hidden input's value, which will always be updated correctly, instead of dealing with the issues with select values.

Ah, it takes it's value from the top one! I knew that but did not think to apply it in this situation.  So just make the top one a (hidden) text, and if there is not a real value, the third one will take it's value from it! genius.  Thanks!

Well, the hidden attriubute can be anywhere, as long as the default values are the same. The backend code of the sheet will keep all inputs, selects, and spans with the same name property synced to the same value. The hidden input just allows you to directly query the value in your css. For example, you could do this: HTML          <input class='selection-state' type='hidden' value="None" name='attr_T_Special'> <select name="attr_T_Special" class="txtShort"> <option value="None" selected title="No modifiers at all.">None</option> <option value="Initiative" title="This is ...">Initiative</option> <option value="Recovery" title="This is ...">Recovery</option> </select> <button class="text-button button-nodice HideIfNotChecked" name="roll_T_btnCorruptKarma" type="roll" , etc. CSS .sheet-selection-state[value=None] ~ .sheet-HideIfNotChecked{      display:none; } .sheet-selection-state[value=Initiative] ~ .sheet-HideIfNotChecked{      background-color:blue; } .sheet-selection-state[value=Recovery] ~ .sheet-HideIfNotChecked{      border:5px solid red; } to not just hide the button if not needed, but also style it based on what it's going to be used for.

Scott C. said: That's something I've run into occassionally. Doing styling based on the value of a select is not very reliable. Instead, I'd recommend adding this:          <input type='hidden' value="None" name='attr_T_Special'> <select name="attr_T_Special" class="txtShort"> <option value="None" selected title="No modifiers at all.">None</option> <option value="Initiative" title="This is ...">Initiative</option> <option value="Recovery" title="This is ...">Recovery</option> </select> <input class="hidden testChecked" name="attr_T_Special" type="checkbox" value="None"/> <button class="text-button button-nodice HideIfNotChecked" name="roll_T_btnCorruptKarma" type="roll" , etc. Then, you can just base the styling off the hidden input's value, which will always be updated correctly, instead of dealing with the issues with select values. I like it. ;-)

I swear that this whole issue is now behaving very differently than it used to years ago when I wrote the code that is not working now!  Scott C. As I recall, it is only sort of true that you can have the hidden value anywhere in the file. When I say that I need to make sure I have a hidden text value that is high up in the file, it is because, when you have multiple values with the same name, it USED to always take the top (highest in the file) value for all of it's default values (except that it would not take select statements to find a default for the value).  Example: <input class="hidden" name="attr_T_Mod-Type" type="text" value="@{Adjust-All-Tests-Total}"/> <!-- Make sure top one has the correct default value, as top one sets the default value that others see. --> <input class="hidden test-secondary" name="attr_T_Mod-Type" type="checkbox" value="0"/> <input class="hidden test-secondary" name="attr_T_Mod-Type" type="checkbox" value="(0)"/> <span class="nowrap HideIfSecondaryChecked" title="@{repeating_talents_X_T_Mod-Type} What modifiers does this Talent apply.">Modifiers: <select name="attr_T_Mod-Type" class="txtShort"> <option value="0" title="No modifiers at all.">None</option> <option value="@{Adjust-All-Tests-Total}" selected title="Modifiers that apply to all Action Tests." >Action Test</option>> So you can see that I have three hidden values and a non-hidden value all named T_Mod-Type.  The bottom one, the Select, is for actually selecting the value the attribute can have.  The two checkboxes are for styling. When the value is 0 or (0), certain things should look a certain way.  My problem earlier is that it was not defaulting to the correct value. So the answers above reminded me that the correct thing to do was to put the top one in, a hidden text with a value, and everything will take it's "default" value from it if there is not an actual attribute entry in the database. And this used to work several years ago. Again, when the checkbox with the value of 0 was the top value, the select statement was taking the 0 for it's default value.  My problem is that it is not working reliably any more!!! When I click the Add button and add a blank line to the section, it now has the drop down list (which is the only one visible in the production version, though I often have the other ones visible during testing) and has the "Action" line as the default, as it should. Again, when there are no real values in the repeating section, and just a fake, empty line, everything seems OK now (more or less).  My problem now is that when I enter a value into one of the OTHER fields, such as NAME, then the repeating section is somehow "more real", and it seems to change where it is getting it's default values from in some way that I have not figured out yet! Specifically, it is taking one of the values of 0. Causing the first checkbox to be checked, and the dropdown to be on the modifiers NONE entry. This is incorrect. It should stay at Action until and unless the user changes it to something else. I have confirmed by running test code that T_Mod_Types does not exist as a database value (a few other values always exist within that section when this happens, but not mod types.  I am sure that this type of thing used to work very reliably a while ago (years ago), but now it is doing something else that I can't figure out!

So it does not have anything to do with the repeating section being empty.  If I close the sheet and reopen it, everything is back to as it should be.  The (temporarily unhidden) text box is showing that the value is the value of the text version at top. Both checkboxes are unchecked, the select is saying "Action".  Then if I change ANYTHING in any field within ANY repeating section, ALL the T_Mod-Types defalut change to 0, the first checkbox in every line gets checked, and all the selects change to NONE.    Very, very weird. And crazy-making. 

Ok, you've got a few issues in that code snippet: Checkboxes Checkboxes with the same name, but different check values do not work well as the Roll20 implementation of them does not support it. Additionally, a checkbox can't have "0" as it's check value because 0 is the value the checkbox gets when it is unchecked. If you really need multiple values there, then a radio would be a better bet (or see below for another alternative). Default Values When using multiple elements that are going to have the same default value, you need to actually have them all set to the same default value. If you don't, you run into the issue you're describing. This is because the top one doesn't set the default, and that's not why we're using it. We're using it to be able to dynamically set the css based on the value of the select. This means that the hidden input, the checkbox inputs, and the select would all need to be set to default to one of @{adjust-all-tests-total}, 0, or (0); currently the hidden and select are default to @{adjust-all-tests-total} and the checkboxes are defaulting to 0 because they are unchecked. Implementation of the technique I demonstrated above And, finally, you don't actually need the checkboxes; you just need to make the hidden attribute a type="hidden", not a type="text". This was the point of my demo above. Your code could simply be: <input class="test-secondary" name="attr_T_Mod-Type" type="hidden" value="@{Adjust-All-Tests-Total}"/> <span class="nowrap HideIfSecondaryChecked" title="@{repeating_talents_X_T_Mod-Type} What modifiers does this Talent apply.">Modifiers: <select name="attr_T_Mod-Type" class="txtShort"> <option value="0" title="No modifiers at all.">None</option> <option value="@{Adjust-All-Tests-Total}" selected title="Modifiers that apply to all Action Tests." >Action Test</option> And you CSS would then be: .sheet-test-secondary[value=0] ~ .sheet-HideIfSecondaryChecked{     display:none; } .sheet-test-secondary[value=@{Adjust-All-Tests-Total}] ~ .sheet-HideIfSecondaryChecked{     display:block;/*or whatever styling you want*/ }

Scott C. said: Ok, you've got a few issues in that code snippet: Thanks for your help Scott C, I finally got it working using your method, but there are some very huge gotchas that I had a very difficult time figuring out!&nbsp; I am just going to mention them here, to help anybody having the exact same problems. You are correct that having a checkbox with a value of "0" is sometimes a problem (but in other places it seems to work fine, not sure what is up with that), but sometimes it does cause problems. You say that "Checkboxes with the same name, but different check values do not work well as the Roll20 implementation of them does not support it", but I learned the method from the CSS Wizardry thread here on Roll20, and have found the method to work very reliably here on roll20 for years. However I traced my original problems that I wrote about above to it affecting Select statements where there is a checkbox with the same name. I would have sworn that it was behaving better in years past. Maybe there was a change on the Roll20 side, I am not sure. Anyway, I do want to test for a value of zero, and was having the problems described above, so I was trying the method Scott C describes above. Like I said, there are some Gotchas. I tried the code snippets&nbsp;above, plus several variants, but they were not working. I found a stack overflow link&nbsp; <a href="https://stackoverflow.com/questions/10645552/is-it-possible-to-use-an-input-value-attribute-as-a-css-selector" rel="nofollow">https://stackoverflow.com/questions/10645552/is-it-possible-to-use-an-input-value-attribute-as-a-css-selector</a> &nbsp;where many people say that what was describe will not work, because it does not look to see if what the USER has entered matches the value, it simply checks to see if the value attribute hardcoded into the html matches. I tested it out and was convinced that the naysayers were correct, and what was described above could not work. However then I pasted one last snippets in exactly with no modifications whatsoever, and it worked.&nbsp; But while the test snippet worked, I could not get it to work in my code at all. I would paste a snippet into my sheets, and it would work, then I would add very similar code, using the exact same principles into my real code, and it would not work at all. started making new, slightly modified snippets, and changing one thing at a time, and finally found the first gotcha. But the 2nd gotcha took me forever to work out. There was code that seemed functionally identical, that obeyed all the common rules of css. And it would not work. It took me many, many hours to figure out the 2nd gotcha!&nbsp; So if anybody else is trying to make this work, here are the here are the gotchas! (1) If you are selecting from a select statement, the quote marks do not matter.&nbsp;.sheet-state1[value=None] and&nbsp;.sheet-state[value="None"] both work and are equivalent. All the examples you will find anywhere do not have quote marks, but having quote marks are OK. However if you are selecting from an input field type="number" then quotes are mandatory. . sheet-state1[value="0" ] will work.&nbsp; .sheet-state1[value=0 ] will not.&nbsp; This particular gotcha was easily suspected&nbsp;and easily found.&nbsp; (2) For some unknown weird reason, When you have a [value=nn] in your selectors, you can't use a comma to separate multiple selectors. Each selector needs its own declaration box! so .sheet-show-most:checked~.sheet-sect .sheet-testZero[value="0"]+.sheet-HideIfZero&nbsp; &nbsp; &nbsp;{&nbsp;display: none; } .sheet-show-most:checked~.sheet-sect .sheet-testZero[value="1"]+.sheet-HideIfOne&nbsp; &nbsp; &nbsp;{&nbsp;display: none; } both work fine, but&nbsp; .sheet-show-most:checked~.sheet-sect .sheet-testZero[value="0"]+.sheet-HideIfZero, .sheet-show-most:checked~.sheet-sect .sheet-testZero[value="1"]+.sheet-HideIfOne { display: none;} Does not work at all for ether selector! I don't know what is up with that, and can only&nbsp; think that it must be some weird bug, but it was very, very hard to discover this since I tend to add selectors into comma separated lists, and as soon as I did, they stopped working. Very, Very Annoying!&nbsp; EDIT: As explained about 6 posts down, (2) as described above is not the whole answer. The problem is that if you have a bad selector in the list, it will not just ignore that selector, it might ignore the entire list. Thus you can't just add potential selectors to a list as it might cause the entire list to be disabled! Anyway, if you can avoid the weird things that don't work as you would expect them to, this works nicely and is well behaved. Thanks.&nbsp;

Are you sure about that second gotcha? I have this complex section in the trollbabe character sheet on the repository that works: input.sheet-switch-areas:not([value='trollbabe'])~div&nbsp;.sheet-toggle-trollbabe, input.sheet-switch-areas:not([value='tearsinrain'])~div&nbsp;.sheet-toggle-tearsinrain, input.sheet-switch-areas:not([value='custom'])~div&nbsp;.sheet-toggle-custom, input.sheet-switch-areas:not([value='stranger'])~div&nbsp;.sheet-toggle-stranger, input.sheet-switch-areas:not([value='epic'])~div&nbsp;.sheet-toggle-epic, input.sheet-switch-areas:not([value='stranger']):not([value='custom']):not([value='tearsinrain']):not([value='trollbabe'])~div&nbsp;.sheet-toggle-notepic, input.sheet-switch-areas:not([value='epic']):not([value='custom']):not([value='tearsinrain']):not([value='trollbabe'])~div&nbsp;.sheet-toggle-notstranger, input.sheet-switch-areas:not([value='epic']):not([value='stranger']):not([value='tearsinrain']):not([value='trollbabe'])~div&nbsp;.sheet-toggle-health, input.sheet-switch-areas:not([value='stranger']):not([value='custom'])~div&nbsp;.sheet-toggle-customstranger&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;none; } If you're right, maybe it's something to do with numbers. Interestingly, just before the above section I have input.sheet-switch-sheet:not([value='0'])~div.sheet-standard-wrapper&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;none; } input.sheet-switch-sheet:not([value='1'])~div.sheet-rebuild-wrapper&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;none; } It's a long time since I did the sheet, but I cant imagine why I'd separate them into separate rules, unless I also found I was having issues with commas. But I'd need to test it - I dont remember if I had issues or not. On the other gotcha, I always use quotes and didnt realise there were occasions you didnt need them. Scott mentioned it just in the last couple of days, and i noticed that you could use either quotes or not for hidden inputs. So I hadnt run into your first gotcha, but that's handy to know.

Maybe it is just with numbers or &lt;input&gt; statements. I just combined everything that gets its value from select statements into one long list, and everything still works. but when I added the numbers to the list, it stopped working. separated them, and it works again.&nbsp; So if the data is selected by the user from a &lt;select&gt; statement, you can use lists of selectors. &lt;input type="number"&gt; fields, you can't. I have not tested it with &lt;input type="text"&gt;.&nbsp; But like I said, it took me a long time before I bothered to test that, because I just did not expect that to make any difference.&nbsp;

Yes, its not surprising it took a long time, it's a very specific and weird error.

Chris D. said: Scott C. said: Ok, you've got a few issues in that code snippet: Thanks for your help Scott C, I finally got it working using your method, but there are some very huge gotchas that I had a very difficult time figuring out!&nbsp; I am just going to mention them here, to help anybody having the exact same problems. You are correct that having a checkbox with a value of "0" is sometimes a problem (but in other places it seems to work fine, not sure what is up with that), but sometimes it does cause problems. You say that "Checkboxes with the same name, but different check values do not work well as the Roll20 implementation of them does not support it", but I learned the method from the CSS Wizardry thread here on Roll20, and have found the method to work very reliably here on roll20 for years. However I traced my original problems that I wrote about above to it affecting Select statements where there is a checkbox with the same name. I would have sworn that it was behaving better in years past. Maybe there was a change on the Roll20 side, I am not sure. Anyway, I do want to test for a value of zero, and was having the problems described above, so I was trying the method Scott C describes above. Like I said, there are some Gotchas The checkbox with a checked value of 0 will always be problem. Having a checkbox with a checked value of 0 means that there is no data difference between its checked and unchecked state. This can sometimes appear to work for single iteration testing, or immediately after a reload, but will eventually break. Additionally, if you ever want to use that attribute to control the function of a sheetworker there will be no way to do so as the sheetworker will see 0 or 0 and not be able to differentiate the two. As for the multi checkboxes with the same name; I haven't seen that in the thread, but it's an extremely long thread so that doesn't really mean much. I will just point out that if you want to use multiple values for a checkbox like input, a radio is purpose built for this and causes no issues. The only reason to use multiple checkboxes is to allow the selection of multiple things at once. While Roll20's character sheets allow this to some extent in pure html/css, sheetworkers can't parse these multiple values (or at least, I've never gotten them to). I tried the code snippets&nbsp;above, plus several variants, but they were not working. I found a stack overflow link&nbsp; <a href="https://stackoverflow.com/questions/10645552/is-it-possible-to-use-an-input-value-attribute-as-a-css-selector" rel="nofollow">https://stackoverflow.com/questions/10645552/is-it-possible-to-use-an-input-value-attribute-as-a-css-selector</a> &nbsp;where many people say that what was describe will not work, because it does not look to see if what the USER has entered matches the value, it simply checks to see if the value attribute hardcoded into the html matches. I tested it out and was convinced that the naysayers were correct, and what was described above could not work. However then I pasted one last snippets in exactly with no modifications whatsoever, and it worked.&nbsp; The issue that that stack overflow is referencing is the exact reason why I said the input being used as the style control&nbsp; MUST &nbsp;be type='hidden' . (1) If you are selecting from a select statement, the quote marks do not matter.&nbsp;.sheet-state1[value=None] and&nbsp;.sheet-state[value="None"] both work and are equivalent. All the examples you will find anywhere do not have quote marks, but having quote marks are OK. However if you are selecting from an input field type="number" then quotes are mandatory. . sheet-state1[value="0" ] will work.&nbsp; .sheet-state1[value=0 ] will not.&nbsp; This particular gotcha was easily suspected&nbsp;and easily found.&nbsp; (2) For some unknown weird reason, When you have a [value=nn] in your selectors, you can't use a comma to separate multiple selectors. Each selector needs its own declaration box! so .sheet-show-most:checked~.sheet-sect .sheet-testZero[value="0"]+.sheet-HideIfZero&nbsp; &nbsp; &nbsp;{&nbsp;display: none; } .sheet-show-most:checked~.sheet-sect .sheet-testZero[value="1"]+.sheet-HideIfOne&nbsp; &nbsp; &nbsp;{&nbsp;display: none; } both work fine, but&nbsp; .sheet-show-most:checked~.sheet-sect .sheet-testZero[value="0"]+.sheet-HideIfZero, .sheet-show-most:checked~.sheet-sect .sheet-testZero[value="1"]+.sheet-HideIfOne { display: none;} Does not work at all for ether selector! I don't know what is up with that, and can only&nbsp; think that it must be some weird bug, but it was very, very hard to discover this since I tend to add selectors into comma separated lists, and as soon as I did, they stopped working. Very, Very Annoying!&nbsp; Number 1 is good to know, and certinaly odd. As for number 2, I agree with GiGs, there's something else going on in your code as I have no issues using multiple numeric selectors in sequence. As shown in the below code: HTML &lt;input class="test-secondary" name="attr_T_Mod-Type" type="hidden" value="@{Adjust-All-Tests-Total}"/&gt; &lt;span class="nowrap HideIfSecondaryChecked" title="@{repeating_talents_X_T_Mod-Type}&nbsp; What modifiers does this Talent apply."&gt;Modifiers:&lt;/span&gt; &lt;input name="attr_T_Mod-Type" class="txtShort" type='number' value='1'&gt; &lt;input class="test-tertiary" name="attr_T_Mod-Type2" type="hidden" value="@{Adjust-All-Tests-Total}"/&gt; &lt;span class="nowrap HideIfTertiaryChecked" title="@{repeating_talents_X_T_Mod-Type}&nbsp; What modifiers does this Talent apply."&gt;Modifiers:&lt;/span&gt; &lt;input name="attr_T_Mod-Type2" class="txtShort" type='number' value='1'&gt; CSS .sheet-test-secondary[value="0"] ~ .sheet-HideIfSecondaryChecked, .sheet-test-tertiary[value="0"] ~ .sheet-HideIfTertiaryChecked{ &nbsp; &nbsp; display:none; } .sheet-test-secondary[value="1"] ~ .sheet-HideIfSecondaryChecked, .sheet-test-tertiary[value="1"] ~ .sheet-HideIfTertiaryChecked{ &nbsp; &nbsp; display:block;/*or whatever styling you want*/ }

Oh yes, I totally meant to point out the value="0" problem iwth checkboxes. You need a value of something, anything, other than 0 for a checkbox to work, because 0 is its unchecked value.

OK, yes, item #2 does not seem to be the true gotcha.&nbsp; Working on another issue, I have learned that in some cases, a single bad selector can kill a whole selector box.&nbsp; So if you have: goodSelector,&nbsp; badSelector {css} then the presence of badSelector can cause the css to never be done even for the goodSelector. Separating them into separate blocks will at least keep the badSelector from killing the functionality of the goodSelector.&nbsp; So I guess the true gotcha is that you can't just keep adding selectors into a list to try. If you have a selector block that is working, and you want to add potentially bad selectors too it, copy the block and add new stuff in as separate blocks, Inspect the item to see which selectors are actually good, and then you can add those to your block of known good selectors.&nbsp; If you have a block of selectors that is not working, separate them out into individual blocks, then repeat the process above. Identify the good ones and build a block of known good selectors. Keep potentially bad selectors separated until proven that they are harmless.&nbsp; In the case above, I think that just having one of the selectors being&nbsp; .sheet-test-secondary[value=1] (as opposed to " .sheet-test-secondary[value="1"] ")&nbsp; killed the entire selection block, so that even the good selectors were never run.&nbsp;