How can I summarize values from selected option

Question

I have an HTML form with four groups of select options selector, selector2, selector3, and selector4. I am trying to add the values of the selected options, but this fails. How can I summarize? in my code only print the values together like strings.

function graffar() {
  var graffarA = document.getElementById('list2').value;
  var graffarB = document.getElementById('list3').value;
  var graffarC = document.getElementById('list4').value;
  var graffarD = document.getElementById('list5').value;

  var graffartotal = graffarA + graffarB + graffarC + graffarD;
  alert(graffartotal)
  return;
}

<form action="" class="specialform">
  <fieldset>
    <legend>(Graffar)</legend>
    <label for="job">Condition</label>
    <select name="selector" id="list2" class="decorated" onchange="getValueOp ();">
      <option value="null">Choose</option>
      <optgroup label="Condition">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
      </optgroup>
    </select>

    <label for="job">Condition 2 </label>
    <select name="selector2" id="list3" class="decorated" onchange="getValueOp ();">
      <option value="null">Choose</option>
      <optgroup label="Condition2">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
      </optgroup>
    </select>

    <label for="job">Condition 3</label>
    <select name="selector3" id="list4" class="decorated" onchange="getValueOp ();">
      <option value="null">Selecciona un rango</option>
      <optgroup label="Condition3">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
      </optgroup>
    </select>
    <label for="job">Condition 4 </label>
    <select name="selector4" id="list5" class="decorated" onchange="getValueOp ();">
      <option value="null">Choose</option>
      <optgroup label="Condition4">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
      </optgroup>
    </select>
    <button type="submit" form="form1" href="javascript:void(0)" onclick="closeNav();graffar()">Calcular</button>
</form>

Answer 1

You can use the parseInt function to convert the string values to numbers. For example:

var graffarA = parseInt(document.getElementById('list2').value);