javascript - 尝试使用 HTML 和 JAVASCRIPT 将复选框列表与多个功能链接

Question

我的代码计算输入数字集的 AVG 或 MAX，我希望用户检查包含 AVG 和 MAX 的复选框列表以获得所需的输出，但我无法弄清楚这样做。

如果我输入“2,4”而没有检查列表输出是 AVG 和 MAX，即 3 4，我试图只检查 AVG 或 MAX 结果，但它没有用。

我已经检查了两个函数 calculateAVG() 和 calculateMAX() 并且它们产生了正确的输出

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>

标签： javascripthtmlcheckbox

Answer 1

计数检查，然后查看 ID。

我还建议您包装在一个表单中并使用提交事件

我做了一些更改以简化代码

让函数做一件事并使用事件将它们组合在一起

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>