Menu
I'm trying to make an editable character sheet for the game Pathfinder. I have a <select> for choosing a race and a value set to each race. My value is a string though. What I need to do is when a race is selected I need an input form to be updated.
The Javascript should assign a variable for the stat going to be modified. The user would then type in the base stat number and when finished the javascript would then either add or subtract whatever the modifier is from the value entered by the user.
For example: A dwarf gets a +2 to their constitution score. So when a user selects dwarf from the drop down menu I need my script to recognize that and declare a variable equal to 2. The user would then type in the base stat, let's say 13. Once they are done entering in that number the code would automatically update the input field to 15.
I've figured out how to do this for things like <p> but I can't get it for text inputs. I realize the easy thing would be to set the option value to whatever the bonus number is but races effect 3 stats, two positively and one negatively. So I can only understand how to do this with in/else statements. I'm very new to this.
Here is my code. Any help is appreciated greatly.
<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>
741
You are saying if (race = "cat") which is telling race to be equal to cat, not determining whether it is or not. You need to use == not =
Anyway, your problem lies in this line
var race = document.getElementById("race");
It should be
var race = document.getElementById("race").value;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
