Changing an HTML form input with JavaScript

Question

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>

Well you could use "switch" which seems ideal for this, based on what race the user selects. — Anirudh
– Anirudh, Commented Mar 29, 2016 at 5:24
@Anirudh switch statements have actually been proven to be slower than just a simple 2-conditional if/else statement. By milliseconds though, not a lot — Mark Eriksson
– Mark Eriksson, Commented Mar 29, 2016 at 5:28

Mark Eriksson · Accepted Answer · 2016-03-29 05:26:37Z

2

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;

answered Mar 29, 2016 at 5:26

Mark Eriksson

1,47510 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kenneth Chan · Accepted Answer · 2016-03-29 05:27:12Z

0

How about change it to

if (race.value == "cat") {
var strMod = 3;

answered Mar 29, 2016 at 5:27

Kenneth Chan

5304 silver badges21 bronze badges

Comments

paulgv · Accepted Answer · 2016-04-03 20:14:26Z

0

The mistake in the above line of code is that you are not comparing strings.

if (race = "cat") {

should be changed to

if (race.value == "cat") {

edited Apr 3, 2016 at 20:14

paulgv

1,82817 silver badges20 bronze badges

answered Apr 3, 2016 at 19:45

Shajith Kunnumbrath

865 bronze badges

Collectives™ on Stack Overflow

Changing an HTML form input with JavaScript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related