jQuery - Variable Outside Selectors / Functions - Sum Variables

Michael Brown :

I think I am close but I am missing something. Not doing something right. Here is the link to the JSFiddle - JSFiddle Link

These all work individually but I need part one and part two to be evaluated together to determine the value of part 3's total. My part 1 needed to fit multiple conditions. My part 2 result stays 0 and part 3 sum never happens. If I don't define the variables, part 1 and part 2 work. Thank you very much in advance.

<p>
  Part 1
</p>
<label for="pt3c-pt2-q1-cpr_$DropDownChoice">Class 1</label>
<select id="pt3c-pt2-q1-cpr_$DropDownChoice" title="pt3c-pt2-q1-cpr" class="RadioText">
  <option value="False" selected="selected">False</option>
  <option value="True">True</option>
</select><br>
<label for="pt3c-pt2-q1-dot_$DropDownChoice">Class 2</label>
<select id="pt3c-pt2-q1-dot_$DropDownChoice" title="pt3c-pt2-q1-dot" class="RadioText">
  <option value="False" selected="selected">False</option>
  <option value="True">True</option>
</select><br>
<label for="pt3c-pt2-q1-lto_$DropDownChoice">Class 3</label>
<select id="pt3c-pt2-q1-lto_$DropDownChoice" title="pt3c-pt2-q1-lto" class="RadioText">
  <option value="False" selected="selected">False</option>
  <option value="True">True</option>
</select><br>
<label for="pt3c-pt2-q1-other_$TextField">Class 4</label>
<input type="text" value="" maxlength="255" id="pt3c-pt2-q1-other_$TextField" title="pt3c-pt2-q1-other" class="long"><br>
<label for="pt3c-pt2-q1b_$TextField">Result</label>
<input type="text" value="" maxlength="5" id="pt3c-pt2-q1b_$TextField" title="pt3c-pt2-q1b" class="long"><br>

<p>
  Part 2
</p>
<label for="pt3c-pt2-q2_$DropDownChoice">Part 2 : Question</label>
<select id="pt3c-pt2-q2_$DropDownChoice" title="pt3c-pt2-q2" class="RadioText">
  <option value="False" selected="selected">False</option>
  <option value="True">True</option>
</select><br>
<label for="pt3c-pt2-q2b_$TextField">Part 2 : Result</label>
<input type="text" maxlength="5" id="pt3c-pt2-q2b_$TextField" title="pt3c-pt2-q2b" class="long ">

<p>
  Part 3
</p>
<label for="pt3c-pt2-total_$TextField">Total</label>
<input type="text" value="" maxlength="5" id="pt3c-pt2-total_$TextField" title="pt3c-pt2-total" class="long">
$(function() {
  var pt3cpt2q1b = "0";
  var pt3cpt2q2b = "0";
  var pt3cpt2total = "0";

  $("*[title^=pt3c-pt2]").change(function() {
    if ($("select[title='pt3c-pt2-q1-cpr']").val() == "True" ||
      $("select[title='pt3c-pt2-q1-dot']").val() == "True" ||
      $("select[title='pt3c-pt2-q1-lto']").val() == "True" ||
      $("input[title='pt3c-pt2-q1-other']").val().length !== 0) {
      var pt3cpt2q1b = "50";
      $("input[title='pt3c-pt2-q1b']").val(pt3cpt2q1b);
    }
    if ($("select[title='pt3c-pt2-q1-cpr']").val() == "False" &&
      $("select[title='pt3c-pt2-q1-dot']").val() == "False" &&
      $("select[title='pt3c-pt2-q1-lto']").val() == "False" &&
      $("input[title='pt3c-pt2-q1-other']").val().length === 0) {
      var pt3cpt2q1b = "0";
      $("input[title='pt3c-pt2-q1b']").val(pt3cpt2q1b);
    } else {}
  });

  $("select[title='pt3c-pt2-q2']").change(function() {
    if ($("select[title='pt3c-pt2-q2']").val() == "True") {
      var pt3cpt2q2b = "50";
      $("input[title='pt3c-pt2-q2b']").val(pt3cpt2q2b);
    }
    if ($("select[title='pt3c-pt2-q2']").val() == "False") {
      var pt3cpt2q2b = "0";
      $("input[title='pt3c-pt2-q2b']").val(pt3cpt2q2b);
    } else {}
  });

  $("*[title^=pt3c-pt2]").change(function() {
    pt3cpt2total = parseInt(pt3cpt2q1b) + parseInt(pt3cpt2q2b);
    $("input[title='pt3c-pt2-q2b']").val(pt3cpt2total);
  });
});
RainyRain :

try to update the variables instead of redefining them in the function.To avoid such problems, let is used in the example so it tell you that you are trying to redefine an already defined value instead of just updating the value;

$(function() {
  let pt3cpt2q1b = "0";
  let pt3cpt2q2b = "0";
  let pt3cpt2total = "0";

  $("*[title^=pt3c-pt2]").change(function() {
    if ($("select[title='pt3c-pt2-q1-cpr']").val() == "True" ||
      $("select[title='pt3c-pt2-q1-dot']").val() == "True" ||
      $("select[title='pt3c-pt2-q1-lto']").val() == "True" ||
      $("input[title='pt3c-pt2-q1-other']").val().length !== 0) {
      pt3cpt2q1b = "50";
      $("input[title='pt3c-pt2-q1b']").val(pt3cpt2q1b);
    }
    if ($("select[title='pt3c-pt2-q1-cpr']").val() == "False" &&
      $("select[title='pt3c-pt2-q1-dot']").val() == "False" &&
      $("select[title='pt3c-pt2-q1-lto']").val() == "False" &&
      $("input[title='pt3c-pt2-q1-other']").val().length === 0) {
      pt3cpt2q1b = "0";
      $("input[title='pt3c-pt2-q1b']").val(pt3cpt2q1b);
    } else {}
  });

  $("select[title='pt3c-pt2-q2']").change(function() {
    if ($("select[title='pt3c-pt2-q2']").val() == "True") {
      pt3cpt2q2b = "50";
      $("input[title='pt3c-pt2-q2b']").val(pt3cpt2q2b);
    }
    if ($("select[title='pt3c-pt2-q2']").val() == "False") {
      pt3cpt2q2b = "0";
      $("input[title='pt3c-pt2-q2b']").val(pt3cpt2q2b);
    } else {}
  });

  $("*[title^=pt3c-pt2]").change(function() {
    pt3cpt2total = parseInt(pt3cpt2q1b) + parseInt(pt3cpt2q2b);
    $("input[title='pt3c-pt2-q2b']").val(pt3cpt2total);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
  Part 1
</p>
<label for="pt3c-pt2-q1-cpr_$DropDownChoice">Class 1</label>
<select id="pt3c-pt2-q1-cpr_$DropDownChoice" title="pt3c-pt2-q1-cpr" class="RadioText">
  <option value="False" selected="selected">False</option>
  <option value="True">True</option>
</select><br>
<label for="pt3c-pt2-q1-dot_$DropDownChoice">Class 2</label>
<select id="pt3c-pt2-q1-dot_$DropDownChoice" title="pt3c-pt2-q1-dot" class="RadioText">
  <option value="False" selected="selected">False</option>
  <option value="True">True</option>
</select><br>
<label for="pt3c-pt2-q1-lto_$DropDownChoice">Class 3</label>
<select id="pt3c-pt2-q1-lto_$DropDownChoice" title="pt3c-pt2-q1-lto" class="RadioText">
  <option value="False" selected="selected">False</option>
  <option value="True">True</option>
</select><br>
<label for="pt3c-pt2-q1-other_$TextField">Class 4</label>
<input type="text" value="" maxlength="255" id="pt3c-pt2-q1-other_$TextField" title="pt3c-pt2-q1-other" class="long"><br>
<label for="pt3c-pt2-q1b_$TextField">Result</label>
<input type="text" value="" maxlength="5" id="pt3c-pt2-q1b_$TextField" title="pt3c-pt2-q1b" class="long"><br>

<p>
  Part 2
</p>
<label for="pt3c-pt2-q2_$DropDownChoice">Part 2 : Question</label>
<select id="pt3c-pt2-q2_$DropDownChoice" title="pt3c-pt2-q2" class="RadioText">
  <option value="False" selected="selected">False</option>
  <option value="True">True</option>
</select><br>
<label for="pt3c-pt2-q2b_$TextField">Part 2 : Result</label>
<input type="text" maxlength="5" id="pt3c-pt2-q2b_$TextField" title="pt3c-pt2-q2b" class="long ">

<p>
  Part 3
</p>
<label for="pt3c-pt2-total_$TextField">Total</label>
<input type="text" value="" maxlength="5" id="pt3c-pt2-total_$TextField" title="pt3c-pt2-total" class="long">

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=26256&siteId=1