FC Bet Counter

3 lines of code that counts the number of FC bets.
Adds a big check mark once you hit 10.

Here's what it looks like:

Here's a direct link to the script on my GitHub. 

And this is the code:

// ==UserScript==
// @author         0o0slytherinpride0o0
// @name           Neopets - FC Bet Counter
// @version        2.0
// @description    Adds a simple count of FC bets in the table header
// @include        *://www.neopets.com/pirates/foodclub.phtml?type=current_bets*
// ==/UserScript==

var table = document.querySelector("table[border='0'][cellpadding='4'][cellspacing='2'][width='500'][bgcolor='black']");
var count = table.children[0].children.length - 3;
table.querySelector("tbody tr td font b").innerText += " --- Count: " + count + (count == 10 ? "\u2705" : "");

Basically the code is:

1. look for the bet table
2. count number of bet rows in the table
3. insert text saying how many bet rows there are

Told you my scripts were simple!😝

---

Want to see how it works?

I made a gif, entering the code piece by piece into the Inspector Panel (right click -> Inspect).
Don't be afraid to try this out yourself!

Line 1: the bet table

Use  querySelector  to find the bet table:

document.querySelector("table[border='0'][cellpadding='4'][cellspacing='2'][width='500'][bgcolor='black']");

Then save it as a variable (by adding  var table =  in front).

Line 2: the bet count

Count the number of bet rows in the table:

 table.children[0].children  is accessing the  tr elements  (i.e., the rows of the table).
This is because the HTML is:

<table>              
    <tbody>          
    	<tr>...</tr> 
        <tr>...</tr> 
        ...          
    </tbody>         
</table>             

So,  table.children[0] is the  tbody element , whose children are the  tr elements .

Add  .length  to get the number of rows.
Add  - 3  to ignore the 3 header/footer rows that we don't want to count (there's a footer when you have at least one bet).

Then save it as a variable (by adding  var count =  in front).

Line 3: update the header text

Finally, the part of the code that actually does something!

First, we have to access the header text:

table.querySelector("tbody tr td font b")

Access the text ( string ) itself (instead of the  b element ) by adding  .innerText . 

Then update the text by using  +=  to add the following  string  onto the end of the header's current text:

" --- Count: " + count + (count == 10 ? "\u2705" : "");

The part in parentheses basically asks: does  count  equal 10?

• If yes, also add the symbol ✅ (U+2705),
• Else ( : ) add the empty string  ( ""  i.e., nothing).

I refreshed at the end to show you how it goes back to the original state, because you aren't actually changing anything on the website, just on your side.

Having it as a script means this code executes each time you go to this page.

Neat, right? I hope this helps reassure you about how it works and what my scripts are actually doing (and maybe even make you feel confident enough to try writing your own!).

Obviously other ones are more complicated, but if you want to see how it works, just open up the Inspector Panel, enter the code, and watch what it does!