Question

我以为我已经解决了这个JavaScript“ for”循环，以便每次更改一个选择字段时将几个选择字段的数字选择汇总为一个数字。

但是，在任何选定字段中修改选择都是在重新添加数字，而不是替换初始选择数字-这就是我想要的。

示例：用户从3个字段中选择以下值：+ 15，-5，+ 1。总数应为“ 11”

如果用户将其第一选择修改为+10而不是＃+ 15，则总值应为“ 6”。而是将修改后的数字添加到所有内容。所以数字变成“ 21”-不是我想要的。

注意：我想随着每个选择项的增加而逐步增加-当用户完成字段操作时，并非所有选择项的总数

这就是我所拥有的：

<form action="/cgi-bin/dropdown.cgi" method="post">
 <select class="select0 selectables" id="dropdown-0" name="dropdown0">        
 <option disabled="disabled" selected="selected" value="">select</option>    
 <option value="10">Choice 1 (+10)</option>
 <option value="-5">Choice 2 (-5)</option>
 <option value="60">Choice 3 (+60)</option> 
</select>
<br />
<select class="select1 selectables" id="dropdown-1" name="dropdown1">    
<option disabled="disabled" selected="selected" value="">select</option>
<option value="8">Choice A (+8)</option>
<option value="-10">Choice B (-10)</option>
<option value="15">Choice C (+15)</option> 
</select>
<br />
<select class="select2 selectables" id="dropdown-2" name="dropdown2">    
<option disabled="disabled" selected="selected" value="">select</option>
<option value="5">Choice ii (+5)</option>
<option value="15">Choice ii (+15)</option>
    <option value="12">Choice iii (+12)</option> 
    </select>
 </form>

  <div id="tally" style="">0</div>
  <script>
  var sum = 0; 

  document.addEventListener("DOMContentLoaded", function(event) {
    var gg1 = new JustGage({
      id: "gg1",
      value: 0,
      textRenderer: customValue
    });

    var userSelection = document.getElementsByClassName('selectables');
    for(let i = 0; i < userSelection.length; i++) {
      userSelection[i].addEventListener("change", function() {
        fieldvalue = userSelection[i].value;
        fieldname = userSelection[i].id;

        if (fieldvalue > 0) {
          // using += breaks other scripts for some reason
          sum = sum + parseInt(fieldvalue);
        } else if (fieldvalue < 1) {
          fieldvalue = fieldvalue * -1;
          sum = sum - parseFloat(fieldvalue, 10);
        }
        document.getElementById("tally").innerHTML = sum; 
        // this is the value that takes the number I'm trying to increment based on choices in selects 
        gg1.refresh(sum);
        return false;
      })
    }

  });
  </script>

Answer 1

每当更改任何选择值时，都应重新计算整个和。像这样：

  onload = function {

    var userSelection = document.getElementsByClassName('selectables');
    for(let i = 0; i < userSelection.length; i++) {
      userSelection[i].addEventListener("change", function() {
        var sum= computeSum();
        //whatever you want to do with sum
      })
    }

    function computeSum() {
      var sum = 0;
      for(const select in userSelection) {
        sum += select.value;
      }
      return sum;
    }

  }

Answer 2

之所以会这样，是因为在更改侦听器的回调函数中，您没有考虑其他下拉列表的值。使用第二个for循环抓取它们，然后重新计算总和。

这是您修改后的回调函数：

for (let i = 0; i < userSelection.length; i++) {
  userSelection[i].addEventListener("change", function() {
    sum = 0;
    for (var b = 0; b < userSelection.length; b++) {
      fieldvalue = userSelection[b].value;
      if (fieldvalue > 0) {
        // using += breaks other scripts for some reason
        sum = sum + parseInt(fieldvalue);
      } else if (fieldvalue < 1) {
        fieldvalue = fieldvalue * -1;
        sum = sum - parseFloat(fieldvalue, 10);
      }
    }
    document.getElementById("tally").innerHTML = sum;
    // this is the value that takes the number I'm trying to increment based on choices in selects 
    gg1.refresh(sum);
    return false;
  })
}

Answer 3

就像其他人提到的那样，每次选择控制值发生任何更改时，都需要重新计算总数。这是一个演示（未优化）：

document.querySelectorAll('select').forEach(select => select.addEventListener('change', (event) => {
  if (allValid()) {
    document.querySelector('#tally').innerHTML = calcTotal();
  }
}))


const allValid = () => {
  let status = true;
  document.querySelectorAll('select').forEach(select => {
    if (select.selectedIndex === 0) status = false;
  })
  return status;
}

const calcTotal = () => {
  let total = 0;
  document.querySelectorAll('select').forEach(select => {
    total += parseInt(select.value);
  })
  return total;
}

<select class="select0 selectables" id="dropdown-0" name="dropdown0">
  <option disabled="disabled" selected="selected" value="">select</option>
  <option value="10">Choice 1 (+10)</option>
  <option value="-5">Choice 2 (-5)</option>
  <option value="60">Choice 3 (+60)</option>
</select>
<br />
<select class="select1 selectables" id="dropdown-1" name="dropdown1">
  <option disabled="disabled" selected="selected" value="">select</option>
  <option value="8">Choice A (+8)</option>
  <option value="-10">Choice B (-10)</option>
  <option value="15">Choice C (+15)</option>
</select>
<br />
<select class="select2 selectables" id="dropdown-2" name="dropdown2">
  <option disabled="disabled" selected="selected" value="">select</option>
  <option value="5">Choice ii (+5)</option>
  <option value="15">Choice ii (+15)</option>
  <option value="12">Choice iii (+12)</option>
</select>

<div id="tally" style="">0</div>

选择值不正确地增加/减少js中的总数

3 个答案: