I'm creating a char-sheet for a system I play with my friends, but stuck trying to change pages with buttons, could someone help me?

I believe the problem is arround here:   <!-- Botões de troca de Página -->   <!-- Nome de todos os botões de ação devem começar com act no html apenas -->   < div class = " botoes " >     < button       class = " botao botao-personagem "       name = " act_botao-troca-personagem "       type = " action "     >       < h4 >Personagem</ h4 >     </ button >     < button       class = " botao botao-habilidades "       name = " act_botao-troca-habilidades "       type = " action "     >       < h4 >Habilidades</ h4 >     </ button >     < button       class = " botao botao-magia "       name = " act_botao-troca-magia "       type = " action "     >       < h4 >Magia</ h4 >     </ button >     < button       class = " botao botao-equipamentos "       name = " act_botao-troca-equipamentos "       type = " action "     >       < h4 >Equipamentos</ h4 >     </ button >     <!-- Nome desse input precisa começar com attr -->     < input       class = " troca-pagina "       name = " attr_botoes-troca "       type = " hidden "       value = " act_botao-troca-personagem "     />   </ div >   <!-- Pagina do botão personagem -->   < div class = " pagina pagina-personagem " >     < span >       < div class = " linha-de-divisao-dragao " >         < h3 >Personagem</ h3 >       </ div >       < div class = " linha-de-divisao-final " ></ div >     </ span >   </ div >   <!-- Pagina do botão habilidades -->   < div class = " pagina pagina-habilidades " >     < span ></ span >   </ div >   <!-- Pagina do botão magia -->   < div class = " pagina pagina-magia " >     < span >       < div class = " linha-de-divisao-dragao " >         < h3 >Focus</ h3 >       </ div >     </ span >   </ div >   <!-- Pagina do botão equipamentos -->   < div class = " pagina pagina-equipamentos " >     < span >       < div class = " linha-de-divisao-final " ></ div >     </ span >   </ div > </ div > <!-- JS --> < script type = " text/worker " >   const buttonlist = [     "botao-troca-personagem",     "botao-troca-habilidades",     "botao-troca-magia",     "botao-troca-equipamentos"   ];   buttonlist.forEach(button => {     on(`clicked:${button}`, function() {       setAttrs({         botoes-troca: button       });     });   }); </ script > .sheet-pagina {   display : none ; } /*Botões troca pagina*/ .sheet-troca-pagina [ value = " botao-troca-personagem " ] ~ .sheet-pagina-personagem , .sheet-troca-pagina [ value = " botao-troca-habilidades " ] ~ .sheet-pagina-habilidades , .sheet-troca-pagina [ value = " botao-troca-magia " ] ~ .sheet-pagina-magia , .sheet-troca-pagina [ value = " botao-troca-equipamentos " ] ~ .sheet-pagina-equipamentos {   display : block ; }

Is the bottom of the code (below </script>) in a separate CSS file? Do you have legacy mode set to true (the legacy checkbox ticked)? Ahh I see the issue. Your buttons are inside a div. They have to be on the same level in the hierarchy as the DIVs they affect. Remove < div class = " botoes " > and the code should start working, or rewrite the CSS at the end to account for it.

Reposting solution from discord chat as well so it's findable for those that find this via search: The problem is not the buttons being in a div  (See correction detailed in my next post). Being able to put them in a div (or ideally a nav element) is the benefit of this approach. Instead, there are two issues with the code: Your initial value for botoes-troca shouldn't have the act_ prefix in it. A syntax error in your setAttrs. This isn't valid javascript: {   botoes-troca: button } You need to either use the object literal syntax to use names that have hyphens in them (e.g. {["botoes-troca"]:button} ), or change your attribute naming scheme to use snake_case instead of kebab-case. My personal recommendation is to switch to snake_case, as it will make working with your attributes in javascript much easier, and to start using a collector object to collect your changes rather than passing setAttrs a raw object. All of that would look like this: HTML <!-- Your button div up here --> <!-- Nome desse input precisa começar com attr -->     <input       class="troca-pagina"       name="attr_botoes_troca"       type="hidden"       value="act_botao-troca-personagem"     /> <!-- rest of your sheet here --> JS const buttonlist = [   "botao-troca-personagem",   "botao-troca-habilidades",   "botao-troca-magia",   "botao-troca-equipamentos" ]; buttonlist.forEach(button => {   on(`clicked:${button}`, function() {     const setObj = {}; //Define empty object that will be used to collect changes.     setObj.botoes_troca = button;     setAttrs(setObj);   }); }); The collection object is admittedly overkill here, but it's a good habit to get into for when you start doing more complex sheetworkers.

Thank you for posting that, Scott. There's a lot there that I missed. At the risk of a derail, what do you mean by this: The problem is not the buttons being in a div. Being able to put them in a div (or ideally a nav element) is the benefit of this approach. Since its based on CSS classes, and the rule there does use the page hierarchy, how is the fact those lasses are inside a div not relevant? I'm wondering how something like this works without taking page structure into account: .sheet-troca-pagina[value="botao-troca-personagem"] ~ .sheet-pagina-personagem,

Edited. I had been looking at the code in the most recent discord post, which already had the hidden input moved outside of the div. you are correct that this code has the hidden input inside the div, which definitely will not work.

ah, I didn't realise there was a difference with the code on Discord.