HTML/Javascript help: Showing alternative tables depending on attribute

Hey all, I am building a small character sheet and I am a little stuck. Depending on the "race" of the character, I want different tables shown. I tried several stuff with ChatGPT and looked into the forum, but it just does not work. I thought I could use buttons similar to what I have done for using tabs in the character sheet, therefore I used the following code HTML:   /*creating the (normally hidden) input and the buttons                <div>                     <input class="sheet-races" name="attr_race"  value="human"  />                     <button type="action" name="act_ork" value="ork">ork</button>                     <button type="action" name="act_human" value="human" >human</button>                                      </div> /*The tables which are hidden and should become unhidden if the attribute "race" becomes a certain value.                 <div class="table-containera">                     <div>                         <table>                             <tr>                                 <th>Ork</th>                                 <th>Spalte 2</th>                             </tr>                             <tr>                                 <td>A1</td>                                 <td>A2</td>                             </tr>                         </table>                     </div>                 </div>                    <div class="table-containerb">                     <div>                         <table>                             <tr>                                 <th>Human</th>                                 <th>Spalte 2</th>                                 <th>Spalte 3</th>                             </tr>                             <tr>                                 <td>B1</td>                                 <td>B2</td>                                 <td>B3</td>                             </tr>                         </table>                     </div>                 </div> /* the java script so pressing the buttons will result in a change of the attribute <script type="text/worker">     const buttonlist = ["ork","human"];     buttonlist.forEach(button => {         on(`clicked:${button}`, function() {             setAttrs({                 race: button             });         });     }); </script> Finally the CSS: /*Configure the tab buttons*/ .charsheet .table_containera, .charsheet .table_containerb {     display: none; } /* show the selected tab */ .charsheet .sheet-races[value="ork"] ~ div.table_containera {     display: block; } So, the tables are hidden, but they are not unhidden.  I tried this in the character sheet sandbox. I would be glad if somebody could help and I am sorry if this was already solved somewhere else. However, I did not find anything. Thanks!

I could give the usual rant why chatGPT will never be any good for Roll20, but I'll skip that and jump to the likely solution. When you have something like this: .charsheet .sheet-races[value="ork"] ~ div.table_containera { This part .sheet-races[value="ork"] must be on the same 'level' as this part div.table_containera You have this <div>                     <input class="sheet-races" name="attr_race"  value="human"  /> </div> <div class="table-containera"> And it should be <input type="hidden" class="sheet-races" name="attr_race"  value="human"  /> <div class="table-containera"> Notice the sheet-races class item is not buried in more nesting - it is on the same 'level' as the divs it affects. The rest of the code you've listed doesn't matter for this problem - this is the key part. That's why I trimmed out some code - I showed only the relevant part.

Also, a more general note: inputs must always have a type, and only 5 are supported in roll20: text, number, checkbox, radio and hidden. Each does different things. If you aren't sure what you want, text is the default.

Wow, first of all: Thank you very much! Actually, I "deleted" the type for the input (hidden), so I could see that the buttons work. However, this somehow broke my code. It only worked after I added "hidden" AND put them on the same level (same intendation and removing the div around the attribute). Considering ChatGPT: It failed on three different problems, for two of which I found a solution by myself, but for this one, I was stuck. Again, thank you for the fast and very helpful reply.