jQuery - Variable Outside Selectors / Functions - Sum Variables

Question

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);
  });
});

try to update the variables instead of redefining them in the function. So use pt3cpt2q2b = "50"; instead of var pt3cpt2q2b = "50"; To avoid such problems, try using const and let do define variables, since this will tell you you are trying to redefine an already defined value instead of just updating the value; — RainyRain
– RainyRain, Commented Mar 5, 2020 at 14:33

RainyRain · Accepted Answer · 2020-03-05 14:39:12Z

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">

Thank you very much RainyRain. I also had a type in my sum function that was placing the value in the wrong input field. I'm good to go now.

Collectives™ on Stack Overflow

jQuery - Variable Outside Selectors / Functions - Sum Variables

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related