trying to link checkbox list with multiple functions using HTML & JAVASCRIPT

Question

my code calculates the AVG or MAX of an input set of numbers, I want the user to check on a checkbox list that contains AVG and MAX for desired output but I couldn't figure out doing it.

if I put an input of "2,4" without check listing the output is both AVG and MAX which is 3 4, I tried to checklist for only AVG or MAX outcome but it didn't work.

I have checked both function calculateAVG() & calculateMAX() and they produce correct output

function proccesFloat(flt) {
  var splitFloat = flt.split(",");
  for (x in splitFloat) {
    splitFloat[x] = parseFloat(splitFloat[x]);
  }
  return splitFloat;
}

function calculateAVG(setNum) {

  let total = 0;
  var numInput = document.getElementById("setNum").value;
  var result = 0;
  var avg = proccesFloat(numInput);

  for (let i = 0; i < avg.length; i++) {
    total += avg[i];
  }
  result = total / avg.length;
  document.getElementById('outputAVG').innerHTML = result;

}

function calculateMAX(setNum) {

  var numInput = document.getElementById("setNum").value;
  var numarry = proccesFloat(numInput);
  var max = 0;
  for (let i = 0; i < numarry.length; i++) {
    if (numarry[i] > max) {
      max = numarry[i];
    }
  }
  document.getElementById('outputMAX').innerHTML = max;
}

function calculate() {
  var checkBox = document.getElementsByTagName("check");


  if (checkBox[0].checked) {
    calculateAVG(document.getElementById("setNum"));
  }
  if (checkBox[0].checked) {
    calculateMAX(document.getElementById("setNum"));
  } {
    alert('please choose formula')
    return false;
  }
}

<header>

  <input type="Numbers" id="setNum" placeholder="Enter Set of Numbers">
  <br>
  <button onclick="calculate()" id="btn1">calculate</button>
  <output id="outputAVG"></output>
  <output id="outputMAX"></output>

  <form method="post">
    <fieldset>
      <legend>Formula To Calculate?</legend>
      <input type="checkbox" id="avg" name="check" onclick="calculate()">AVG<br>
      <input type="checkbox" id="max" name="check" onclick="calculate()">MAX<br>
      <br>

    </fieldset>
  </form>
</header>

mplungjan · Accepted Answer · 2021-10-03 17:58:55Z

1

Count the checked and then look at the IDs.

I also suggest you wrap in a form and use the submit event

I made a few more changes to simplify the code

Let the functions do one thing and use the event to bring them together

const proccesFloat = flt => flt.split(",").map(fl => +fl); // cast to float


const calculateAVG = setNum => {
  const arr = proccesFloat(setNum);
  const total = arr.reduce((a, b) => a + b)
  return total / arr.length;
}

const calculateMAX = setNum => Math.max(...proccesFloat(setNum));

document.getElementById("calcForm").addEventListener("submit", function(e) {
  e.preventDefault(); // stop submission
  const chks = document.querySelectorAll("[name=check]:checked")
  if (chks.length === 0) {

    alert('please choose formula')
    return

  }
  if (document.getElementById("avg").checked) {
    document.getElementById('outputAVG').innerHTML = calculateAVG(document.getElementById("setNum").value);
  }
  if (document.getElementById("max").checked) {
    document.getElementById('outputMAX').innerHTML = calculateMAX(document.getElementById("setNum").value);
  }
})

<header>
  <form id="calcForm">
    <input type="Numbers" id="setNum" placeholder="Enter Set of Numbers">
    <br>
    <button type="submit">calculate</button>
    <output id="outputAVG"></output>
    <output id="outputMAX"></output>
    <fieldset>
      <legend>Formula To Calculate?</legend>
      <input type="checkbox" id="avg" name="check">AVG<br>
      <input type="checkbox" id="max" name="check">MAX<br>
      <br>

    </fieldset>
  </form>
</header>

edited Oct 3, 2021 at 17:58

answered Oct 3, 2021 at 17:45

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

yousef Over a year ago

Much appreciated, thanks for your help and time.

mplungjan Over a year ago

@yousef Please reload, I moved the innerHTML out of the calculation functions

Collectives™ on Stack Overflow

trying to link checkbox list with multiple functions using HTML & JAVASCRIPT

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related