Custom sheet issue with tabs

Hey, currently having an issue with using tabs inside of a repeating section. The tabs themselves are working (despite using ids which took some serious work) but a strange thing happens. On making a new repeating item, the first tab is selected and when changing values the tab stays selected (as you would expect) however, upon closing the character sheet completely (or reloading roll20 or whatnot) the tab always defaults to the last tab...Does anyone know why this is? If this is a repeatable section issue it is fine as I put the description of the field there which functions just fine, I am just wondering why it does not default to the first tab (which has the checked tag in the html code) below is the code                                  < div   id = "activetab_container"   style = " margin-top: -5px; " >                                      < input   class = "activetabInput"   id = "activetab1"   type = "radio"   name = "activetabs"   style = " grid-area: a;height:20px !important; padding: 1px; "   checked >                                      < label   for = "activetab1"   style = " border-radius: 10px 0px 0px 10px;grid-area: a;font-size: 12pt;height:20px !important; padding: 1px;margin-left: 5px; width: 96px; " >< span > Statistics </ span ></ label >                                      < input   class = "activetabInput"   id = "activetab2"   type = "radio"   name = "activetabs" style = " grid-area: b;height:20px !important; padding: 1px; " >                                      < label   for = "activetab2" style = " grid-area: b;font-size: 12pt;height:20px !important; padding: 1px; " >< span > Flaw </ span ></ label >                                      < input   class = "activetabInput"   id = "activetab3"   type = "radio"   name = "activetabs" style = " grid-area: c;height:20px !important; padding: 1px; " >                                      < label   for = "activetab3" style = " grid-area: c;font-size: 12pt;height:20px !important; padding: 1px; " >< span > Effects </ span ></ label >                                      < input   class = "activetabInput"   id = "activetab4"   type = "radio"   name = "activetabs" style = " grid-area: h;height:20px !important; padding: 1px; " >                                      < label   for = "activetab4"   style = " border-radius: 0px 10px 10px 0px;grid-area: h;font-size: 12pt;height:20px !important; padding: 1px;margin-right: 5px; width: 96px; " >< span > Description </ span ></ label >                                      < section   id = "activecontent1"   class = "activetab-content"   name = "activeStatistics" >                                          < div   class = "activeGridInner" >                                              < h4 > Name:  </ h4 >                                              < input   type = "text"   name = "attr_activeN"   value = ""   placeholder = "WAR Name"   class = "hiddenSheet"   style = " font-size:inherit " >                                              < h4 > Bonus Shards:  </ h4 >                                              < input   type = "number"   style = " width:18px; "   class = "hiddenSheet centered"   name = "attr_shards"   value = "1" >                                              < h4 > Maximum Shards:  </ h4 >                                              < input   type = "number"   style = " width:18px; "   class = "hiddenSheet centered"   name = "attr_shards_max"   value = "1"   readonly = "true" >                                          </ div >                                          < div   class = "activeGridInnerSecondary" >                                              < input   type = "hidden"   class = "activeType"   name = "attr_activeType"   value = "1"   />                                              < h4 > Action shard value:  </ h4 >                                              < input   type = "number"   style = " width:18px; "   class = "hiddenSheet centered"   name = "attr_actionShards"   value = "1" >                                              < h4   class = "activeDamage" > Damage shard value:  </ h4 >                                              < h4   class = "activeHealing" > Healing shard value:  </ h4 >                                              < input   type = "number"   style = " width:18px; "   class = "hiddenSheet centered"   name = "attr_damageHealingShards"   value = "1" >                                              < h4   class = "activeDamage" > Piercing shard value:  </ h4 >                                              < input   type = "number"   style = " width:18px; "   class = "hiddenSheet centered activeDamage"   name = "attr_piercingShards"   value = "1" >                                          </ div >                                      </ section >                                      < section   id = "activecontent2"   class = "activetab-content"   name = "activeFlaws" >                                          < textarea   spellcheck = 'false'   autocorrect = 'off'    name = "activeFlaw"   class = "activeTextarea"   style = " height:45px; "   placeholder = "Flaw" ></ textarea >                                      </ section >                                      < section   id = "activecontent3"   class = "activetab-content"   name = "activeEffects" >                                          < textarea   spellcheck = 'false'   autocorrect = 'off'    name = "activeEffects"   class = "activeTextarea"   style = " height:90px; "   placeholder = "Effects" ></ textarea >                                      </ section >                                      < section   id = "activecontent4"   class = "activetab-content"   name = "activeDescription" >                                          < textarea   spellcheck = 'false'   autocorrect = 'off'    name = "activeDescription"   class = "activeTextarea"   style = " height:90px; "   placeholder = "Description" ></ textarea >                                      </ section >                                  </ div > It might also be pertinent to mention that these tabs are placed INSIDE a details element, which is inside a repeating section (believe there is a reason for this madness...well mainly because I could not manage to get a nice popup overlay effect in the repeating section)

I'd recommend posting the entire relevant block of HTML (including the details element), as well as the relevant CSS, so people can test it. As well as a sheet worker, if you are using a sheet worker to arrange the tabs.

That said this is likely the problem: you radio inputs names are like name="activetabs" and should be name="attr_activetabs"

here is the html < fieldset   class = "repeating_war" >                              < details   class = "repeating_war" >                                  < summary >                                      < div   class = "activeWarShellSmall" >                                          < div   class = "activeGrid passiveTitle"   style = " grid-area:a " >                                              < h4   class = "header"   style = " width:35px; margin-top: -5px; " > Active:  </ h4 >                                              < input   type = "checkbox"   class = "hiddenSheet centered activeInput"   name = "attr_active"   value = "1" >                                              < input   type = "text"   name = "attr_activeSlot"   value = "New Active WAR (Click to open)"   class = "header passiveTitleFlex activeWARName"   readonly = "true"   />                                              < h4   class = "header activeClick"   ></ h4 >                                              < input   type = "hidden"   class = "activeInput"   name = "attr_active"   value = "0"   />                                              < div   class = "activeActive" >                                                  < input   type = "hidden"   class = "activeTypeToggle"   name = "attr_activeType"   value = "Offence"   />                                                  < button   type = 'roll'   class = "button passiveButton activeOffence"   value = ''   name = 'roll_activeOffence' ></ button >                                                  < button   type = 'roll'   class = "button passiveButton activeBleed"   value = ''   name = 'roll_activeBleed' ></ button >                                                  < button   type = 'roll'   class = "button passiveButton activeRupture"   value = ''   name = 'roll_activeRupture' ></ button >                                                  < button   type = 'roll'   class = "button passiveButton activeHealing"   value = ''   name = 'roll_activeHealing' ></ button >                                                  < button   type = 'roll'   class = "button passiveButton activeAmorphic"   value = ''   name = 'roll_activeHealing' ></ button >                                                  < button   type = 'roll'   class = "button passiveButton activeBeneficial"   value = ''   name = 'roll_activeBeneficial' ></ button >                                                  < button   type = 'roll'   class = "button passiveButton activeCondition"   value = ''   name = 'roll_activeCondition' ></ button >                                              </ div >                                              < div   class = "activeInactive" >                                                  < button   type = 'roll'   class = "button passiveButton"   style = " margin-right: 2px; opacity: 0; "   disabled = "true" ></ button >                                              </ div >                                          </ div >                                          < h4   style = " grid-area:b;margin-left: 7px; " > Type:  </ h4 >                                          < select   type = "text"   style = " grid-area:c "   class = "hiddenSheet WARSelect"   name = "attr_activeType" >                                              < option   value = "Offence"   selected > Offence </ option >                                              < option   value = "Amorphic" > Offence (Amorphic) </ option >                                              < option   value = "Bleed" > Offence (Bleed) </ option >                                              < option   value = "Rupture" > Offence (Rupture) </ option >                                              < option   value = "Healing" > Healing </ option >                                              < option   value = "Beneficial" > Healing (Beneficial) </ option >                                              < option   value = "Condition" > Minor Condition </ option >                                          </ select >                                          < h4   style = " grid-area:d " > Range:  </ h4 >                                          < select   type = "text"   style = " grid-area:e "   class = "hiddenSheet WARSelect"   name = "attr_activeShape" >                                              < option   value = "Self"   selected > Self </ option >                                              < option   value = "Melee" > Melee </ option >                                              < option   value = "Reach" > Reach </ option >                                              < option   value = "Ranged" > Ranged </ option >                                              < option   value = "LRanged" > Long Ranged </ option >                                              < option   value = "Aura" > Aura </ option >                                          </ select >                                          < div   class = "activeEndurance" >                                              < h4 > Endurance:  </ h4 >                                              < input   type = "number"   style = " width:21px; "   class = "hiddenSheet centered"   name = "attr_endurance"   value = "1" >                                          </ div >                                      </ div >                                  </ summary >                                  < div   id = "activetab_container"   style = " margin-top: -5px; " >                                      < input   class = "activetabInput"   id = "activetab1"   type = "radio"   name = "activetabs"   style = " grid-area: a; "   checked >                                      < label   for = "activetab1"   style = " border-radius: 10px 0px 0px 10px;grid-area: a;font-size: 12pt;margin-left: 5px; width: 96px; height:20px !important; padding: 1px; " >                                          < span > Statistics </ span >                                      </ label >                                      < input   class = "activetabInput"   id = "activetab2"   type = "radio"   name = "activetabs"   style = " grid-area: b; " >                                      < label   for = "activetab2"   style = " grid-area: b;font-size: 12pt;height:20px !important; padding: 1px; " >                                          < span > Flaw </ span >                                      </ label >                                      < input   class = "activetabInput"   id = "activetab3"   type = "radio"   name = "activetabs"   style = " grid-area: c; " >                                      < label   for = "activetab3"   style = " grid-area: c;font-size: 12pt;height:20px !important; padding: 1px; " >                                          < span > Effects </ span >                                      </ label >                                      < input   class = "activetabInput"   id = "activetab4"   type = "radio"   name = "activetabs"   style = " grid-area: h; " >                                      < label   for = "activetab4"   style = " border-radius: 0px 10px 10px 0px;grid-area: h;font-size: 12pt;height:20px !important; padding: 1px;margin-right: 5px; width: 96px; " >                                          < span > Description </ span >                                      </ label >                                      < section   id = "activecontent1"   class = "activetab-content"   name = "activeStatistics" >                                          < div   class = "activeGridInner" >                                              < h4 > Name:  </ h4 >                                              < input   type = "text"   name = "attr_activeN"   value = ""   placeholder = "WAR Name"   class = "hiddenSheet"   style = " font-size:inherit " >                                              < h4 > Bonus Shards:  </ h4 >                                              < input   type = "number"   style = " width:20px; "   class = "hiddenSheet centered"   name = "attr_shards"   value = "1" >                                              < h4 > Maximum Shards:  </ h4 >                                              < input   type = "number"   style = " width:20px; "   class = "hiddenSheet centered"   name = "attr_shards_max"   value = "1"   readonly = "true" >                                          </ div >                                          < div   class = "activeGridInnerSecondary" >                                              < input   type = "hidden"   class = "activeType"   name = "attr_activeType"   value = "1"   />                                              < h4 > Action shard value:  </ h4 >                                              < input   type = "number"   style = " width:20px; "   class = "hiddenSheet centered"   name = "attr_actionShards"   value = "1" >                                              < h4   class = "activeDamage" > Damage shard value:  </ h4 >                                              < h4   class = "activeHealing" > Healing shard value:  </ h4 >                                              < input   type = "number"   style = " width:20px; "   class = "hiddenSheet centered"   name = "attr_damageHealingShards"   value = "1" >                                              < h4   class = "activeDamage" > Piercing shard value:  </ h4 >                                              < h4   class = "activeHealing" > Shielding shard value:  </ h4 >                                              < input   type = "number"   style = " width:20px; "   class = "hiddenSheet centered activeDamage activeHealing"   name = "attr_piercingShards"   value = "1" >                                          </ div >                                      </ section >                                      < section   id = "activecontent2"   class = "activetab-content"   name = "activeFlaws" >                                          < textarea   spellcheck = 'false'   autocorrect = 'off'   name = "activeFlaw"   class = "activeTextarea"   style = " height:45px; "   placeholder = "Flaw" ></ textarea >                                      </ section >                                      < section   id = "activecontent3"   class = "activetab-content"   name = "activeEffects" >                                          < textarea   spellcheck = 'false'   autocorrect = 'off'   name = "activeEffects"   class = "activeTextarea"   style = " height:90px; "   placeholder = "Effects" ></ textarea >                                      </ section >                                      < section   id = "activecontent4"   class = "activetab-content"   name = "activeDescription" >                                          < textarea   spellcheck = 'false'   autocorrect = 'off'   name = "activeDescription"   class = "activeTextarea"   style = " height:90px; "   placeholder = "Description" ></ textarea >                                      </ section >                                  </ div >                              </ details >                          </ fieldset >

Here is the CSS (Sorry it keeps screwing up if I try to post both) select.WARSelect  {      font-size :  10pt ;      height :  19px   !important ;      margin-top :  0px ;      margin-bottom :  0px ; } .repeating_war  {      border :  1px   solid   black ;      border-radius :  15px ;      margin-bottom :  2px ;      padding-bottom :  5px ; } .activeDamage , .activeHealing  {      display :  none ; } .activeType :where([ value = "Offence" ], [ value = "Amorphic" ], [ value = "Bleed" ], [ value = "Rupture" ], [ value = "Condition" ])~ .activeDamage , .activeType :where([ value = "Healing" ], [ value = "Beneficial" ])~ .activeHealing  {      display :  block ; } div.activeWarShellSmall  {      display :  grid ;      grid-template-rows :  repeat ( 2 ,  23px );      grid-template-columns :  38px   131px   37px   95px   85px ;      grid-template-areas :  "a a a a a""b c d e f" ;      align-items :  end ;      column-gap :  5px ;      height :  52px ;      margin-bottom :  5px ; } div.activeGrid  {      display :  grid ;      grid-template-columns :  50px   25px   1fr   60px ;      height :  24px   !important ;      align-items :  center ;      justify-items :  center ; } div.activeGridInner  {      display :  grid ;      grid-template-columns :  43px   131px   78px   23px   100px   27px ;      height :  19px   !important ;      align-items :  end ;      justify-items :  end ;      width :  100% ;      margin-top :  -10px ;      font-size :  10pt ; } div.activeGridInnerSecondary  {      display :  grid ;      grid-template-columns :  109px   21px   112px   23px   118px   20px ;      height :  19px   !important ;      align-items :  end ;      justify-items :  end ;      width :  100% ;      font-size :  10pt ; } .activeTextarea  {      width :  96%   !important ;      margin :  0px   10px   0px   10px ;      line-height :  13px ; } .activeColumnTitle  {      line-height :  25px ;      background :  rgb ( 7 ,  16 ,  25 );      text-align :  center ;      font-weight :  bolder ;      color :  #85D6FF ;      border-radius :  20px ;      height :  40px ;      display :  flex ;      align-items :  center ;      margin-bottom :  5px ; } .activeWARName  {      height :  25px   !important ;      background :  rgba ( 0 ,  0 ,  0 ,  0 )  !important ;      border :  0px   !important ;      text-align :  center   !important ;      font-size :  15pt   !important ;      margin-top :  -6px   !important ; } h4.activeClick  {      position :  absolute ;      width :  250px ;      height :  25px } .activeButton  {      width :  67%   !important ;      height :  25px   !important ;      position :  absolute ;      background :  none   !important ;      color :  transparent   !important ;      margin :  0px ;      margin-top :  -2px ;      left :  77px ;      border :  0px ;      opacity :  0%   !important ; } .activeNormal , .activeAmorphic , .activeHealing , .activeOffence , .activeBleed , .activeRupture , .activeBeneficial , .activeCondition  {      display :  none ; } .activeTypeToggle [ value = "Healing" ]~ .activeHealing , .activeTypeToggle [ value = "Offence" ]~ :where( .activeNormal ,  .activeOffence ), .activeTypeToggle [ value = "Amorphic" ]~ :where( .activeNormal ,  .activeAmorphic ), .activeTypeToggle [ value = "Bleed" ]~ :where( .activeNormal ,  .activeBleed ), .activeTypeToggle [ value = "Condition" ]~ :where( .activeNormal ,  .activeCondition ), .activeTypeToggle [ value = "Rupture" ]~ :where( .activeNormal ,  .activeRupture ), .activeTypeToggle [ value = "Beneficial" ]~ .activeBeneficial  {      display :  block ;      margin-top :  7px   !important ; } .activeInput  {      width :  15px ;      height :  15px ;      margin-top :  -5px ; } .activeActive  {      display :  none ;      position :  relative ;      top :  -6px ;      right :  20px ;      width :  20px   !important ;      justify-self :  end ; } .activeInactive  {      display :  none ; } .activeEndurance  {      display :  flex ;      grid-area : f;      align-items :  center ;      margin-right :  5px } .active [ value = "1" ]~ div.activeActive , .active [ value = "0" ]~ div.activeInactive  {      display :  block ; } div.passiveWarShell , div.activeWarShell , div.reactiveWarShell , div.stanceShell  {      border :  1px   solid   black ;      border-radius :  15px   15px   15px   15px   !important ; } .tab_container , #activetab_container  {      margin :  0   auto ;      position :  relative ;      display :  grid ;      grid-template-columns :  repeat ( 3 ,  1fr );      grid-template-areas :          "a b c"          "d d d"          "e e e"          "f f f" ; } #activetab_container  {      margin :  0   auto ;      position :  relative ;      display :  grid ;      grid-template-columns :  repeat ( 4 ,  101px );      grid-template-areas :          "a b c h"          "d d d d"          "e e e e"          "f f f f"          "g g g g" ; } .pageToggle [ value = "main" ]~ div.section-main , .pageToggle [ value = "secondary" ]~ div.section-secondary  {      display :  block ; } #tab1 , #activetab1  {      grid-area : a; } #tab2 , #activetab2  {      grid-area : b; } #tab3 , #activetab3  {      grid-area : c; } #activetab4  {      grid-area : h; } #content1 , #activecontent1  {      grid-area : d; } #content2 , #activecontent2  {      grid-area : e; } #content3 , #activecontent3  {      grid-area : f; } #activecontent4  {      grid-area : g; } .tabInput  {      clear :  both   !important ;      padding-top :  10px   !important ;      display :  none   !important ; } .activetabInput  {      opacity :  0 ;      width :  101px   !important ;      z-index :  1   !important ;      height : 20px   !important ;       padding :  1px ; } section  {      clear :  both ;      padding-top :  10px ;      display :  none ; } label  {      font-weight :  700 ;      margin-bottom :  0px   !important ;      font-size :  18px ;      display :  block ;      float :  left ;      width :  20% ;      padding :  .3em ;      color :  #356780 ;      cursor :  pointer ;      text-decoration :  none ;      text-align :  center ;      background :  rgba ( 7 ,  16 ,  25 ,  0.15 );      display :  flex   !important ;      justify-content :  space-evenly ; } #tab1:checked ~ #content1 , #tab2:checked ~ #content2 , #tab3:checked ~ #content3 , #activetab1:checked ~ #activecontent1 , #activetab2:checked ~ #activecontent2 , #activetab3:checked ~ #activecontent3 , #activetab4:checked ~ #activecontent4  {      display :  block ;      background :  transparent ;      color :  #999 ;      border-bottom :  2px   solid   #f0f0f0 ; } .tab_container   .tab-content   p , .tab_container   .tab-content   h3 , #activetab_container   #activetab-content   p , #activetab_container   #activetab-content   h3  {      -webkit-animation : fadeInScale  0.7s   ease-in-out ;      -moz-animation : fadeInScale  0.7s   ease-in-out ;      animation : fadeInScale  0.7s   ease-in-out ; } .tab_container   .tab-content   h3 , #activetab_container   #activetab-content   h3  {      text-align :  center ; } .tab_container  [ id ^= "tab" ] :checked + label  {      color :  #85D6FF ;      background :  rgb ( 7 ,  16 ,  25 );      box-shadow :  inset   0   3px   #0CE ; } #activetab_container  [ id ^= "activetab" ] :checked + label  {      color :  #85D6FF ;      background :  rgb ( 7 ,  16 ,  25 );      box-shadow :  inset   0   3px   #0CE ;      padding-top :  2px   !important ; } .tab_container  [ id ^= "tab" ] :checked + label   .fa , #activetab_container  [ id ^= "activetab" ] :checked + label   .fa  {      color :  #0CE ; } label   .fa  {      font-size :  1.3em ;      margin :  0   0.4em   0   0 ; } div.lowerPage__row  {      display :  grid ;      width :  100% ;      grid-template-columns :  0.98fr   1fr ;      column-gap :  10px ; }

and here are the sheetworkers, but I doubt they impact this < script   type = "text/worker" >         on("change:repeating_war:shards change:repeating_war:endurance change:repeating_war:activeShape sheet:opened", async function(eventInfo) {              if (eventInfo.sourceType === 'sheetworker') return;              getAttrs(['repeating_war_shards', 'repeating_war_endurance','repeating_war_activeShape', 'repeating_war_shards_max'], async function(values) {                  var value = 0;                  let shape = values.repeating_war_activeShape;                  switch (shape){                      case "Self": value = 5;                      break;                      case "Melee": value = 4;                      break;                     case "Reach": value = 3;                      break;                      case "Ranged": value = 2;                      break;                      case "LRanged": value = 1;                      break;                      case "Aura": value = 2;                      break;                      default: break;                  }                  let enduranceValue = (parseInt(values.repeating_war_endurance) * 2) - 2;                 let shardValue = parseInt(values.repeating_war_shards);                 await setAttrs({                      repeating_war_shards_max: value + enduranceValue + shardValue                 });              });          });      </ script >           < script   type = "text/worker" >         on("change:repeating_war:activeN", async function(eventInfo) {              if (eventInfo.sourceType === 'sheetworker') return;              var value = eventInfo.newValue;              if(value === undefined)              setAttrs({ ["repeating_war_activeSlot"]: "Active WAR" });              if(value != null) setAttrs({                 ["repeating_war_activeSlot"]: value              });          });      </ script >

Also update, now it keeps jumping to description after any changes in that section, despite not being tied to anything

You still havent changed those names from name="activetab" to name="attr_activetab" - this is vital, the tab wont be changed unless you do this.

Also, always have all sheetworkers inside a single <script type="text/worker">

GiGs said: You still havent changed those names from name="activetab" to name="attr_activetab" - this is vital, the tab wont be changed unless you do this. I tried it both ways with no difference, this is also the exact same way I handle having more than 1 page of the character sheet and that one works perfectly (but is not inside a repeating section) <a href="https://imgur.com/a/IE7fsjl" rel="nofollow">https://imgur.com/a/IE7fsjl</a> This is from the inspector, they should be basically identical, but it seems that the repeating section is forcing the attr_ attribute onto the attribute whether I want it or not, however even now upon opening the character sheet, this is the section shown (4) where as the inspector still says section 1 is the one that is checked... Andreas J. said: Also, always have all sheetworkers inside a single &lt;script type="text/worker"&gt; Thanks, I will move them, but is there a specific reason or just best practices? Since they do function as is

Matthew C said: GiGs said: You still havent changed those names from name="activetab" to name="attr_activetab" - this is vital, the tab wont be changed unless you do this. I tried it both ways with no difference, this is also the exact same way I handle having more than 1 page of the character sheet and that one works perfectly (but is not inside a repeating section) <a href="https://imgur.com/a/IE7fsjl" rel="nofollow">https://imgur.com/a/IE7fsjl</a> This is from the inspector, they should be basically identical, but it seems that the repeating section is forcing the attr_ attribute onto the attribute whether I want it or not, however even now upon opening the character sheet, this is the section shown (4) where as the inspector still says section 1 is the one that is checked... Regardless of whether it seems to be working or not, you absolutely need that attr_ in the name attributes. There's no point helping you with anything else until you fix that, because the code will not work properly until you fix it. Trust me - make that change. If you make that change and it still doesnt work properly, it means there's another problem and we can track that down. But we cant track it down until this one is fixed. Andreas J. said: Also, always have all sheetworkers inside a single &lt;script type="text/worker"&gt; Thanks, I will move them, but is there a specific reason or just best practices? Since they do function as is Edit: If I put them all in a single sheet worker they stop functioning... Likewise here: if they stop working when you put them in a single script block that tells us there's something wrong with one of your sheet workers. It might appear to be okay in its own script block, but I guarantee something is wrong. Putting all your worked in one script block is a great way to discover critical errors in a sheet worker. Either that, or when you put them in a single script block, you made a copy/paste error and didnt copy one of the sheet workers properly. I think I see the problem with your sheet workers - and I'm surprised they work at all, even in their own sheet works. You cant use the async and await keywords in most sheet workers (at least not without a custom addin). Removing them, your script block could look like this: &lt;script type="text/worker"&gt; &nbsp;&nbsp;&nbsp;&nbsp; on ( "change:repeating_war:shards&nbsp;change:repeating_war:endurance&nbsp;change:repeating_war:activeShape&nbsp;sheet:opened" ,&nbsp; function ( eventInfo )&nbsp;{&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if &nbsp;( eventInfo . sourceType &nbsp;===&nbsp; 'sheetworker' )&nbsp; return ;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; getAttrs ([ 'repeating_war_shards' ,&nbsp; 'repeating_war_endurance' , 'repeating_war_activeShape' ,&nbsp; 'repeating_war_shards_max' ],&nbsp; function ( values )&nbsp;{&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var &nbsp; value &nbsp;=&nbsp; 0 ;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; let &nbsp; shape &nbsp;=&nbsp; values . repeating_war_activeShape ;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; switch &nbsp;( shape ){&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; case &nbsp; "Self" :&nbsp; value &nbsp;=&nbsp; 5 ;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; break ;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; case &nbsp; "Melee" :&nbsp; value &nbsp;=&nbsp; 4 ;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; break ; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; case &nbsp; "Reach" :&nbsp; value &nbsp;=&nbsp; 3 ;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; break ;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; case &nbsp; "Ranged" :&nbsp; value &nbsp;=&nbsp; 2 ;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; break ;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; case &nbsp; "LRanged" :&nbsp; value &nbsp;=&nbsp; 1 ;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; break ;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; case &nbsp; "Aura" :&nbsp; value &nbsp;=&nbsp; 2 ;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; break ;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; default :&nbsp; break ;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; let &nbsp; enduranceValue &nbsp;=&nbsp;( parseInt ( values . repeating_war_endurance )&nbsp;*&nbsp; 2 )&nbsp;-&nbsp; 2 ; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; let &nbsp; shardValue &nbsp;=&nbsp; parseInt ( values . repeating_war_shards ); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; setAttrs ({&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; repeating_war_shards_max : &nbsp; value &nbsp;+&nbsp; enduranceValue &nbsp;+&nbsp; shardValue &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; on ( "change:repeating_war:activeN" ,&nbsp; function ( eventInfo )&nbsp;{&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if &nbsp;( eventInfo . sourceType &nbsp;===&nbsp; 'sheetworker' )&nbsp; return ;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var &nbsp; value &nbsp;=&nbsp; eventInfo . newValue ;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; const &nbsp; output &nbsp;=&nbsp;{}; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if ( value &nbsp;===&nbsp; undefined )&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; output [ "repeating_war_activeSlot" ]&nbsp;=&nbsp; "Active&nbsp;WAR" ;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp; else &nbsp; if ( value &nbsp;!=&nbsp; null )&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; output [ "repeating_war_activeSlot" ]&nbsp;=&nbsp; value ; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if ( output )&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; setAttrs ( output ); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &lt;/script&gt; I made some changes to the second sheet worker, and I'm not sure about it. The original had the problem that the second if statement could overwrite the first. But using undefined and null in separate tests seems like it isnt necessary, and the code should probably just be (replacing from the first if): &nbsp;&nbsp;&nbsp; if(value) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;output["repeating_war_activeSlot"]&nbsp;=&nbsp;value; &nbsp;&nbsp;&nbsp;&nbsp;} else { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;output["repeating_war_activeSlot"]&nbsp;=&nbsp; "Active&nbsp;WAR"; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;setAttrs(output); You can write that much more compactly like so: &nbsp;&nbsp;&nbsp;&nbsp;output["repeating_war_activeSlot"]&nbsp;=&nbsp;value ? value : "Active&nbsp;WAR"; &nbsp;&nbsp;&nbsp;&nbsp;setAttrs(output);

GiGs said: .... Matthew C said: ..... Changed a few things: Added the attr_ to everything looked over the script workers and found I used 2 instances of const [same name here] in the script worker section which stopped them from working when there was one instance of script worker with everything inside, this has been fixed Current problem: Now any change I make in the section causes it to jump to the 4th tab (so instead of only on sheet open, now any action), so problem got worse, but maybe this is needed to fix it, need a new version of the code? Only added the attr_

Matthew C said: looked over the script workers and found I used 2 instances of const [same name here] in the script worker section which stopped them from working when there was one instance of script worker with everything inside, this has been fixed Regarding the const problem: when you create a variable using const, that variable cannot change. If you try to set it to a new value later in the code, or adjust its value, it will cause the worker to crash. If you are creating a variable that needs to change, create it with var or let . Note that this doesnt apply to container varables like objects and arrays (like the output variable i created in the sheet worker i adjusted). But also creating separate instances of the same-named variable within the same scope , whether using const, var, or let, will also cause crashes. It sounds like you had that problem. Scope is a bit difficult to explain, but basically your script block is one scope, every worker within it is its own separate scope, and any { } block within a sheet worker is also its own separate scope. If you define new variables in a scope, they exist only in that scope and all scopes beneath it. It gets complicated if you create new variables with the same name in a scope inside another scope, so i recommend you don't do that (it's a common source of errors).

GiGs said: Matthew C said: looked over the script workers and found I used 2 instances of const [same name here] in the script worker section which stopped them from working when there was one instance of script worker with everything inside, this has been fixed Regarding the const problem: when you create a variable using const, that variable cannot change. If you try to set it to a new value later in the code, or adjust its value, it will cause the worker to crash. If you are creating a variable that needs to change, create it with var or let . Note that this doesnt apply to container varables like objects and arrays (like the output variable i created in the sheet worker i adjusted). But also creating separate instances of the same-named variable within the same scope , whether using const, var, or let, will also cause crashes. It sounds like you had that problem. Scope is a bit difficult to explain, but basically your script block is one scope, every worker within it is its own separate scope, and any { } block within a sheet worker is also its own separate scope. If you define new variables in a scope, they exist only in that scope and all scopes beneath it. It gets complicated if you create new variables with the same name in a scope inside another scope, so i recommend you don't do that (it's a common source of errors). Thanks, yeah I am a Csharp programmer (well still a student) so I understand the scope, just didn't notice the constants as they used to be in seperate scopes making it ok, although I prefer C# to javascript that is for sure :p The code itself is quite messy as I am constantly changing things right now, the beautifying will happen soon :D

Matthew C said: although I prefer C# to javascript that is for sure :p I think everyone prefers another language to javascript, at least at first :)

GiGs said: Matthew C said: although I prefer C# to javascript that is for sure :p I think everyone prefers another language to javascript, at least at first :) Hahaha, yeah and that goes doubely for html and for the life of me I cannot find out what is wrong with the tabs shooting back and forth (they are not controlled by the sheet worker, although the new sheetworker functionality on the dev server (being able to add and remove classes) will make things so much easier. But the tab section outside of the repeating section does exactly what I want, it allows going through tabs without problem and closing and opening the sheet resets it to the first tab as it used the checked flag rather than an attribute, but for some reason the repeating section is being wonky

WOOHOOO!!! I think I found the issue &lt; input &nbsp; class = "activetabInput" &nbsp; id = "activetab1" &nbsp; type = "radio" &nbsp; name = "attr_activetabs" &nbsp; checked &gt; this was the first method which failed &lt; input &nbsp; class = "activetabInput" &nbsp; id = "activetab1" &nbsp; type = "radio" &nbsp; name = "attr_activetabs" checked data-attrname = "activetabs" &gt; Because of the repeating section, this is how it technically looekd when viewed in the inspector, the data-attrname attribute was added AFTER the checked flag which screwed things up &lt; input &nbsp; class = "activetabInput" &nbsp; id = "activetab1" &nbsp; type = "radio" &nbsp; name = "attr_activetabs" &nbsp; data-attrname = "activetabs" &nbsp; checked &gt; Writing it like this (so forcing the data-attrname myself and putting checked after that solves the issue, so the checked flag really needs to be at the end it seems...which does not make much sense tbh...or does it? EDIT: Nevermine, it was working perfectly, even reloaded the page a few times without issue and then out of nowhere it started again EDIT AGAIN!: This time I did manage it, it seems that outside of repeating sections, not giving a radio button a value attribute is completely fine, it has nothing to remember so it simply forgets it, but in the repeating section if you do not add the attribute it acts wonky...now I just use value="" and it functions perfectly So...why?

Matthew C said: Andreas J. said: Also, always have all sheetworkers inside a single &lt;script type="text/worker"&gt; Thanks, I will move them, but is there a specific reason or just best practices? Since they do function as is GiGs gave his answer, but I'll just point to the documentation: <a href="https://wiki.roll20.net/Sheet_Worker_Scripts#.3Cscript_type.3D.22text.2Fworker.22.3E" rel="nofollow">https://wiki.roll20.net/Sheet_Worker_Scripts#.3Cscript_type.3D.22text.2Fworker.22.3E</a>

Andreas J. said: Matthew C said: Andreas J. said: Also, always have all sheetworkers inside a single &lt;script type="text/worker"&gt; Thanks, I will move them, but is there a specific reason or just best practices? Since they do function as is GiGs gave his answer, but I'll just point to the documentation: <a href="https://wiki.roll20.net/Sheet_Worker_Scripts#.3Cscript_type.3D.22text.2Fworker.22.3E" rel="nofollow">https://wiki.roll20.net/Sheet_Worker_Scripts#.3Cscript_type.3D.22text.2Fworker.22.3E</a> Thanks, I see now where it says that they will almost always fail...funny enough I had like 6 sheet workers in seperate sections all functioning, so curious why they would fail...either way they are now all in one like they should be :D

Matthew C said: EDIT AGAIN!: This time I did manage it, it seems that outside of repeating sections, not giving a radio button a value attribute is completely fine, it has nothing to remember so it simply forgets it, but in the repeating section if you do not add the attribute it acts wonky...now I just use value="" and it functions perfectly So...why? That's interesting. I always give attributes a default value, whether number, checkbox, radio, text, or whatever, so I hadn't seen this. But there are a few cases where repeating sections behave differently to normal sheet code, and I think this is because they were added at a later date so the coding for handling them was subtly different. Looks like this is another one of those quirks to keep in mind and work around.

GiGs said: Matthew C said: EDIT AGAIN!: This time I did manage it, it seems that outside of repeating sections, not giving a radio button a value attribute is completely fine, it has nothing to remember so it simply forgets it, but in the repeating section if you do not add the attribute it acts wonky...now I just use value="" and it functions perfectly So...why? That's interesting. I always give attributes a default value, whether number, checkbox, radio, text, or whatever, so I hadn't seen this. But there are a few cases where repeating sections behave differently to normal sheet code, and I think this is because they were added at a later date so the coding for handling them was subtly different. Looks like this is another one of those quirks to keep in mind and work around. Indeed and thanks again for all the help you gave, as well as Andreas, like personal problems coding problems sometimes just need to be discussed to look at it differently (I had radio buttons in a different section that were functioning correctly, so I copied those ones and they worked, so then you just look for the differences)

I want to correct something that was stated earlier in the thread - and where the wiki is factually incorrect. You can have multiple script blocks in a sheet, and they will work fine. Some time ago there was a bug that lasted some time where multiple sheet blocks didn't work, only the first script block in a sheet worked. The roll20 team eventually fixed this. This is where the idea that only having one script block was necessary comes from - for a long time it was absolutely required, So you can have multiple script blocks - it's just not good practice because each script block is completely invisible to the others. With a complex sheet, you will very likely eventually end up with functions that can be called by different sheet workers, but you would need to duplicate them in each script block where you want to use them. It also makes the script blocks more scattered and less organised. So the single script block recommendation is just that a recommendation - but it's a very strong one. I can't think of any situation where it's advantageous to have multiple script blocks, and I can think of problems caused by having separate script blocks that don't exist if you just used a single script block.

GiGs said: I want to correct something that was stated earlier in the thread - and where the wiki is factually incorrect. You can have multiple script blocks in a sheet, and they will work fine. Some time ago there was a bug that lasted some time where multiple sheet blocks didn't work, only the first script block in a sheet worked. The roll20 team eventually fixed this. This is where the idea that only having one script block was necessary comes from - for a long time it was absolutely required, So you can have multiple script blocks - it's just not good practice because each script block is completely invisible to the others. With a complex sheet, you will very likely eventually end up with functions that can be called by different sheet workers, but you would need to duplicate them in each script block where you want to use them. It also makes the script blocks more scattered and less organised. So the single script block recommendation is just that a recommendation - but it's a very strong one. I can't think of any situation where it's advantageous to have multiple script blocks, and I can think of problems caused by having separate script blocks that don't exist if you just used a single script block. Sweet, thanks for the clarification. I am always looking for coding best practices, so even when something functions, if it is recommended for clarity etc. to do it in a different way I do prefer that and yeah my sheet does have various workers using the same stats, so making single constants etc. is quite nice and indeed, keeping the sheet clean is never a bad idea :D