I am trying to make an editable character sheet for a Pathfinder game. I have a <select> for selecting a race and the value set for each race. However, my value is a string. What I need to do is when the race is selected. I need an input form to update.
Javascript must assign a variable to change stat. Then the user enters the base stat number, and when finished, javascript will then add or subtract all the modifier from the value entered by the user.
For example: A dwarf gets +2 in his account. Therefore, when the user selects the gnome from the drop-down menu, I need my script to recognize this and declare a variable equal to 2. Then the user will dial the base stat, say 13. After they are entered into this number, the code will automatically update the input field to 15 .
I figured out how to do this for things like <p> , but I can't get it for text input. I understand that it would be easy to set the value of the parameter regardless of the number of bonuses, but the jumps affect 3 stats, two positively and one negatively. Therefore, I can only understand how to do this with / else instructions. I am very new to this.
Here is my code. Any help is greatly appreciated.
<script> function createModifier () { var race = document.getElementById("race"); if (race = "cat") { var strMod = 3; } else { var strMod = 1; } document.getElementById("strElm").innerHTML = 10 + strMod; } </script> </head> <body> <form> <div id="raceSelector" class="attribute"> <p><strong>Race</strong></p> <select name="race" id="race"> <option value="aas">Aasimar</option> <option value="cat">Catfolk</option> <option value="cha">Changeling</option> <option value="dha">Dhampir</option> <option value="dro">Drow</option> <option value="due">Duergar</option> <option value="dwa">Dwarf</option> <option value="elf">Elf</option> <option value="fet">Fetchling</option> <option value="gil">Gillman</option> <option value="gno">Gnome</option> <option value="gob">Goblin</option> <option value="gri">Grippli</option> <option value="hale">Half-Elf</option> <option value="half">Halfing</option> <option value="halo">Half-Orc</option> <option value="hob">Hobgoblin</option> <option value="hum">Human</option> <option value="ifr">Ifrit</option> <option value="kit">Kitsune</option> <option value="kob">Kobold</option> <option value="mer">Merfolk</option> <option value="nag">Nagaji</option> <option value="orc">Orc</option> <option value="ore">Oread</option> <option value="rat">Ratfolk</option> <option value="sam">Samaran</option> <option value="str">Strix</option> <option value="sul">Suli</option> <option value="svi">Svirfneblin</option> <option value="syl">Sylph</option> <option value="ten">Tengu</option> <option value="tie">Tiefling</option> <option value="und">Undine</option> <option value="van">Vanara</option> <option value="vis">Vishkanya</option> <option value="way">Wayang</option> </select> </div> <div class="attribute"> <input type="text" onchange="createModifier()"></input> <p id="modStr"></p> </div> /form>
source share