Auto-Calculating Values in Custom Character Sheets, HELP!!

Not sure if this is in the right place but I'm starting a new RP with some friends and the game was not in the Roll20 libraries so I'm making the char sheet from scratch.

This game we are playing has some maths sums we need to do and I'm trying to make like a little easier fro my players. I'm trying to go off the examples from the Wiki but it's not working. Does anyone have some examples they have used themselves?

The maths looks like this:
(STR + TOU * 10) + 10 = Hit Points
&
(STR + KI + TOU + INT + AGI + CHA) * Tier Of Power Multiplier = Power

I'm hopeless at HTML, what I've made barely works and has lots of bugs and issues but slowly hammering them out.

Not sure how much you've done code-wise already, but here's an example that should work.  You may have all the attributes created elsewhere on your sheet, but I included them for my example.
Note that you should use the "common" attribute name (ie "@{foo}" ) when used within the value of another attribute.  Also, not sure if it's necessary, but I place parenthesis around my attribute values when doing calculations.  Hope this helps. Cheers 

<span>AGI:<input type="number" name="attr_AGI" value="0"></span>
<span>CHA:<input type="number" name="attr_CHA" value="0"></span>
<span>INT:<input type="number" name="attr_INT" value="0"></span>
<span>KI:<input type="number" name="attr_KI" value="0"></span>
<span>STR:<input type="number" name="attr_STR" value="0"></span>
<span>TOU:<input type="number" name="attr_TOU" value="0"></span>
<span>Tier of Power Multiplier:<input type="number" name="attr_TOPM" value="0"></span><br>
<span>HIT POINTS:<input type="number" name="attr_HP" value="(((@{STR} + @{TOU})*10)+10)" disabled></span>
<span>POWER:<input type="number" name="attr_POWER" value="((@{STR} + @{KI} + @{TOU} + @{INT} + @{AGI} + @{CHA})*@{TOPM})" disabled></span>

EDIT: updated HP value(formula)

Thanks a ton, I'll give it ago after work.

Ok, thanks, it works of sorts, need to work out how to make the maths properly.
At the moment, 3 Str + 2 Tou Times by 10 then 10 added is 33.
It should be 60. I know the code is working...it's the order of the maths.

Any help?

Would post code but just pastes a input box and not the code, sorry.

Also, how do I widen Number Inputs? added a Width style doesn't do anything.

Paul J. said:

Ok, thanks, it works of sorts, need to work out how to make the maths properly.
At the moment, 3 Str + 2 Tou Times by 10 then 10 added is 33.
It should be 60. I know the code is working...it's the order of the maths.

Then you need (STR + TOU) * 10 + 10, not (STR + TOU * 10) + 10 as in your initial post. Simply move the closing parentheses in Vince's example.

oops, should have tested.  Try value="(((@{STR} + @{TOU})*10)+10)" for HP
I'll update the code above.

All works now, thanks all.

Another question is how do I widen the outputs? as the numbers kinda peek off the side (meaning you can see the whole number).

Can't find anything on Google, really stumped.

Use css (style sheet preferred, but you can use inline css as well).  
So if you wanted to adjust the width of an input

<input type="number" name="attr_foo" value="0" style="width:6em;">

You can do the same thing using an external style sheet by adding a class "sheet-input-small" to the input

<input type="number" name="attr_foo" value="0" class="sheet-input-small">

Just add this to your CSS and all input fields with type="number" and class="sheet-input-small" will be assigned width:6em. 

input[type="number"].sheet-input-small { 
   width:6em;
}

Vince said:

oops, should have tested.  Try value="(((@{STR} + @{TOU})*10)+10)" for HP
I'll update the code above.

Don't worry, Vince. You were simply copying the math he posted originally. =P

Thanks all, got is all working and I learn some stuff to. Can't be happier.