Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

Buttons Stopped Working

Hello, I redid a section of my sheet and now the sub-pages (selectable by buttons) stopped working.&nbsp; Instead, all sub-pages show on every page. Where the red line is should be separate pages. They correlate with the buttons. HTML: <a href="https://github.com/MavSantroy/Drakudai/blob/d926f663e44007b9ab3930f64c5a064288a2ea45/Drakudai_html_12_19_2022" rel="nofollow">https://github.com/MavSantroy/Drakudai/blob/d926f663e44007b9ab3930f64c5a064288a2ea45/Drakudai_html_12_19_2022</a> &nbsp; &nbsp; HTML Section:&nbsp;&nbsp; &lt;!-- Start of Psionics Edit Sheet --&gt; CSS:&nbsp; <a href="https://github.com/MavSantroy/Drakudai/blob/f5410b45d4b7da9974cef2856df15ab4284274a5/Drakudai_CSS_12_19_2022" rel="nofollow">https://github.com/MavSantroy/Drakudai/blob/f5410b45d4b7da9974cef2856df15ab4284274a5/Drakudai_CSS_12_19_2022</a>
1671514791
GiGs
Pro
Sheet Author
API Scripter
Did you solve the prior issue with the body discipline section. I was going to look at that tonight?
1671520954

Edited 1671521851
Oosh
Sheet Author
API Scripter
There's a flood of errors in there - do you have an HTML validator? You should definitely grab one. There's a heap of duplicate attributes, unclosed tags, tags closed with the wrong closing tags... like this - 1 example out of.... 92! Though many of them aren't serious :D &lt;button class="sheet-button-roll" type="roll" value="&amp;{template:default} {{name=@{character_name} Rolls STR SAVE}} {{Melee Defense=[[1d20+(@{strength}+@{psi_body_discipline_str})]]}}" title="Melee Defense includes Dexterity, Deflection, Defense Bonus from Combat Style. Any Misc modifiers you must keep in mind manually."&gt; STR &lt;span class="sheet-red-color" title="Your max HP, including any artifiacts, cyb, etc." name="attr_mdf" disabled/&gt; &lt;/button&gt; &lt;/button&gt; There's STR sitting outside all the tags, then a self-closing span, then the button is closed twice. On line 655 you've even got a block of attribute names missing their quotation marks. I'd highly recommend not only getting an HTML validator, but also laying it out in a tidier structure, properly nested and indented: &lt;div id="outer"&gt; &lt;div class="container"&gt; &lt;span&gt;Some attribute&lt;/span&gt; &lt;div class="inner-content"&gt; &lt;button name="some-button" class="some-class another-class" style="some-style: whatever;"&gt; Button Label &lt;/button&gt; &lt;input name="attr_some_attribute" class="some-other-class" type="text" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; Never put more than one element on a line, and don't be afraid to split a single component across multiple lines if it has a load of attributes on it - like the &lt;button&gt; above. Also try not to put any text outside tags at all - you can't style it, hide it, or do anything with it except by manually going through your entire HTML file (like the STR text in the code fragment up top). And it's good practice (though not enforced by HTML) to remember the / closing tag on a self-closing element like &lt;input /&gt; . Some elements can be used as self-closing, or with a paired tag - so leaving out the / slash can create confusion. If you combine a good structure with a validator, you'll save yourselves hours of heartache. Troubleshooting your CSS and scripts for hours because you missed a couple of quotes in the HTML is a massive waste of your time! edit - incidentally, the other error GiGs referred to is likely related. Erratic behaviour of CSS positioning is very often down to HTML structure errors (like an unclosed tag, or wrong closing tag)
Oosh said: There's a flood of errors in there - do you have an HTML validator? You should definitely grab one. There's a heap of duplicate attributes, unclosed tags, tags closed with the wrong closing tags... like this: &lt;button class="sheet-button-roll" type="roll" value="&amp;{template:default} {{name=@{character_name} Rolls STR SAVE}} {{Melee Defense=[[1d20+(@{strength}+@{psi_body_discipline_str})]]}}" title="Melee Defense includes Dexterity, Deflection, Defense Bonus from Combat Style. Any Misc modifiers you must keep in mind manually."&gt; STR &lt;span class="sheet-red-color" title="Your max HP, including any artifiacts, cyb, etc." name="attr_mdf" disabled/&gt; &lt;/button&gt; &lt;/button&gt; There's STR sitting outside all the tags, then a self-closing span, then the button is closed twice. On line 655 you've even got a block of attribute names missing their quotation marks. I'd highly recommend not only getting an HTML validator, but also laying it out in a tidier structure, properly nested and indented: &lt;div id="outer"&gt; &lt;div class="container"&gt; &lt;span&gt;Some attribute&lt;/span&gt; &lt;div class="inner-content"&gt; &lt;button name="some-button" class="some-class another-class" style="some-style: whatever;"&gt; Button Label &lt;/button&gt; &lt;input name="attr_some_attribute" class="some-other-class" type="text" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; Never put more than one element on a line, and don't be afraid to split a single component across multiple lines if it has a load of attributes on it - like the &lt;button&gt; above. Also try not to put any text outside tags at all - you can't style it, hide it, or do anything with it except by manually going through your entire HTML file (like the STR text in the code fragment up top). And it's good practice (though not enforced by HTML) to remember the / closing tag on a self-closing element like &lt;input /&gt; . Some elements can be used as self-closing, or with a paired tag - so leaving out the / slash can create confusion. If you combine a good structure with a validator, you'll save yourselves hours of heartache. Troubleshooting your CSS and scripts for hours because you missed a couple of quotes in the HTML is a massive waste of your time! I know, it's pretty bad. This is basically my very first sheet I built myself.
1671521949

Edited 1671522173
Oosh
Sheet Author
API Scripter
It's not terrible by any means (that definitely wasn't the point I was trying to get across) - but if you arm yourself with some tools to take the pain out of writing the HTML (no one likes writing HTML....) you can spend more time doing the fun stuff of making it look pretty and do cool stuff :) Not manually hunting down missing punctuation which, again, no one likes doing. edit - and as a first attempt, it's definitely not bad at all. It's generally laid out pretty sensibly - just not quite in a way that makes error checking easy
Oosh said: It's not terrible by any means (that definitely wasn't the point I was trying to get across) - but if you arm yourself with some tools to take the pain out of writing the HTML (no one likes writing HTML....) you can spend more time doing the fun stuff of making it look pretty and do cool stuff :) Not manually hunting down missing punctuation which, again, no one likes doing. edit - and as a first attempt, it's definitely not bad at all. It's generally laid out pretty sensibly - just not quite in a way that makes error checking easy I use Microsoft Visual Code, trying to get a validator installed, and used. We will se how that goes!
1671551274
GiGs
Pro
Sheet Author
API Scripter
I use visial code to. The first think I thing I would recommend is installing the beautify plugin. Then you can select everything, click F1, and enter, and it ill try to format everything appropriately. For a HTML sheet, you might just have to select the HTML part - not the script block.
GiGs said: I use visial code to. The first think I thing I would recommend is installing the beautify plugin. Then you can select everything, click F1, and enter, and it ill try to format everything appropriately. For a HTML sheet, you might just have to select the HTML part - not the script block. Just tested it out, seems to have made it beautifuller.
1671600884
GiGs
Pro
Sheet Author
API Scripter
Installing a proper JS Lint extension and getting it working is an important step but it was a long time ago - all I remember was that it was a bit tricky. Does anyone have a step-by-step guide?