как суммировать значения множественных полей выбора, включая вычитание отрицательных чисел (в ноль) - PullRequest
0 голосов
/ 25 апреля 2019

Я пытаюсь использовать несколько полей выбора для изменения числовой начальной точки.Поля выбора содержат несколько отрицательных чисел, поэтому я хочу добавить / вычесть соответственно.В настоящее время я не могу сделать это с JQuery - поэтому я пытаюсь выяснить, как в прямой JavaScript.Я получил это далеко, но это только для одного поля выбора.По той же причине, я не уверен, будут ли отрицательные числа вычитать:

<select class="select1 selectables" id="dropdown-1" name="dropdown1"> 
 <option disabled="disabled" selected="selected" value="">select</option> 
 <option value="10">Choice 1 (plus 10)</option>
 <option value="-5">Choice 2 (minus 5)</option>
 <option value="60">Choice 3 (plus 60)</option> 
</select>
 <br />
<select class="select2 selectables" id="dropdown-2" name="dropdown2">    
 <option disabled="disabled" selected="selected" value="">select</option>
 <option value="5">Choice A (plus 10)</option>
 <option value="15">Choice B (minus 10)</option>
 <option value="15">Choice C (plus 15)</option> 
 </select>
 <br />
 <select class="select3 selectables" id="dropdown-3" name="dropdown3">    
  <option disabled="disabled" selected="selected" value="">select</option>
  <option value="5">Choice ii (- 35)</option>
 <option value="15">Choice ii (plus 15)</option>
 <option value="12">Choice iii (plus 12)</option> 
 </select>

<script>
document.addEventListener("DOMContentLoaded", function(event) {
    var gg1 = new JustGage({
      id: "gg1",
      value: 0
      // removed elements, as this area isn't an issue
    });

document.getElementById('dropdown-1').addEventListener('change', (event) => {
      sum = 0;
      testvar = event.target.value;
      if (testvar > 0) {
        sum = (sum + testvar);
        alert(`up ${testvar}`);
      } else if (testvar < 1) {
        sum = (sum - parseInt(testvar, 10));
        alert(`down ${testvar}`);
      }
      gg1.refresh(sum);
      return false;
    });
</script>

1 Ответ

0 голосов
/ 25 апреля 2019

Вам не нужно специальное лечение для отрицательных чисел. Просто добавьте их, как вы сделали бы с положительными числами. В следующем фрагменте я изменил значения отрицательных параметров на их действительные отрицательные значения. calculateSum() затем вычисляет сумму из всех полей. Не только измененный. Хотя инкрементная версия определенно возможна, нет никаких причин делать это с помощью всего трех блоков. И этот инкрементный вариант, скорее всего, будет иметь ошибки.

document.addEventListener("DOMContentLoaded", function(event) {
  document.getElementById('dropdown-1').addEventListener('change', calculateSum);
  document.getElementById('dropdown-2').addEventListener('change', calculateSum);
  document.getElementById('dropdown-3').addEventListener('change', calculateSum);
});

function calculateSum() {
  sum = 0;
  //iterate all three boxes
  for (var i = 1; i <= 3; ++i) {
    var box = document.getElementById('dropdown-' + i);
    var value = parseInt(box.value);
    if (!isNaN(value))
      sum += value;
  }
  alert(sum);
  return false;
}
<select class="select1 selectables" id="dropdown-1" name="dropdown1">
  <option disabled="disabled" selected="selected" value="">select</option>
  <option value="10">Choice 1 (plus 10)</option>
  <option value="-5">Choice 2 (minus 5)</option>
  <option value="60">Choice 3 (plus 60)</option>
</select>
<br />
<select class="select2 selectables" id="dropdown-2" name="dropdown2">
  <option disabled="disabled" selected="selected" value="">select</option>
  <option value="10">Choice A (plus 10)</option>
  <option value="-10">Choice B (minus 10)</option>
  <option value="15">Choice C (plus 15)</option>
</select>
<br />
<select class="select3 selectables" id="dropdown-3" name="dropdown3">
  <option disabled="disabled" selected="selected" value="">select</option>
  <option value="-35">Choice ii (- 35)</option>
  <option value="15">Choice ii (plus 15)</option>
  <option value="12">Choice iii (plus 12)</option>
</select>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...