如何修复表单上检查值的javascript计算错误

时间:2019-04-05 17:15:50

标签: javascript jquery forms

我设置的表单具有不同值的单选按钮。根据检查哪个值和检查多少个值来计算平均值。然后将其舍入到最接近的整数。如果选择值1,则在计算中应为-1。它适用于某些记录。但是,奇怪的问题是,在某些记录上,根据选择的值的顺序,与类似记录相比,计算出的平均值可能是不同的值

7,5,7,1,5,5,3平均打印5张

3,5,5,1,7,5,7,平均打印4张

7 + 5 + 7-1 + 5 + 5 + 3给您31/7 = 4.42857,应该为4,但将平均值打印为5

3 + 5 + 5-1 + 7 + 5 + 7给您31/7 = 4.42857,并输出正确的平均值4

下面是我在js中进行计算的代码。我不知道会怎样。我非常感谢您的帮助,并希望我能提供足够的信息。

   for(i = 1; i <= activities_num; i++){

      var value_str = $(`input[name=${section}${i}]:checked`).val();

        if(value_str !== undefined) {
            var value = parseInt(value_str);
            if(value === 1) {
               value = -1;
            }
            if(value === 0 ) {
               counter = counter -1;
            }
            options_values_sum += value;
            counter ++;
        }
        console.log(i); 
    }
    var average = Math.round(options_values_sum / counter);

1 个答案:

答案 0 :(得分:0)

我看不到任何问题,这是一种更清洁的方法,请勿使用计数器等。

我们现在可以使用诸如map和reduce的技术。

const getChk = (section) => document.querySelectorAll('section${section}     input[type="checkbox"]:checked');

const computeAverage = (section) => {
  let arr = Array.from(getChk());
  if (arr.length > 0) { 
    return Math.round(arr.map(chk => (parseInt(chk.value) === 1) ? -1 : parseInt(chk.value))
                         .reduce((a, v) => a + v) / arr.length);
  } 
  return 0;
}

document.addEventListener('click', (e) => {
  if (e.target.matches('input[type="checkbox"]')) {
    let avg = computeAverage('#average');
    document.querySelector('#result').innerText = avg;    
  }
});
<section id="average">
  <label>3</label><input type="checkbox" value="3">
  <label>7</label><input type="checkbox" value="7">
  <label>5</label><input type="checkbox" value="5">
  <label>5</label><input type="checkbox" value="5">
  <label>7</label><input type="checkbox" value="7">
  <label>1</label><input type="checkbox" value="1">
  <label>5</label><input type="checkbox" value="5">
  <label>7</label><input type="checkbox" value="7">
  <label>5</label><input type="checkbox" value="5">
  <label>5</label><input type="checkbox" value="5">
  <label>7</label><input type="checkbox" value="7">
  <label>3</label><input type="checkbox" value="3">
</section>

<div id="result"></div>

<p>7,5,7,1,5,5,3 prints an average of 4</p>

<p>3,5,5,1,7,5,7, prints an average of 4</p>