Increasing number in number input from checking a box in another?

September 26, 2022

I’m working on a DnD character creator and am trying to increase certain ability scores based on race. I have a checkbox input next to every race that looks like so:

          <td>
            <input
              type="checkbox"
              id="dragonbornRace"
              onchange="updateRace();"
            />
          </td>
          <td>Dragonborn</td>

I also already have a section for ability score that looks like this:

          <td>
            <input
              type="number"
              value="10"
              id="strScore"
              onchange="updateMods()"
            />
          </td>

My goal is to make it so that when dragonborn checkbox is checked, the strength increases by 2. So far I have this code, but it doesn’t seem to work:

function updateRace() {
  var strScore = document.getElementById("strScore").value;
   if (document.getElementById("dragonbornRace").checked == true) {
strScore = strScore + 2;
 }
}

When I go to test, nothing occurs when I check the box. I am probably missing something obvious, but any help would be appreciated!

>Solution :

The reason is that you need to assign the new score value to strScore elememt.

Also,you need to pay attention to use strScore = Number(strScore) + 2; to get the expected result

function updateRace() {
  var scoreEle = document.getElementById("strScore")
  var strScore = scoreEle.value;
   if (document.getElementById("dragonbornRace").checked == true) {
     strScore = Number(strScore) + 2;
     scoreEle.value = strScore;
  }
}

function updateMods(){
}

<table>
 <tr>
        <td>
            <input
              type="checkbox"
              id="dragonbornRace"
              onchange="updateRace();"
            />
          </td>
          <td>Dragonborn</td>
          <td>
            <input
              type="number"
              value="10"
              id="strScore"
              onchange="updateMods()"
            />
          </td>
 </tr>
<table>