从多个输入中计数的JS函数

Question

我制作了一个简单的计算器，它接收用户输入的信息，然后用两个const执行一个操作，并在选定的结果中给出结果。

我总共有5项投入和5项产出。对于每个输入和输出，我有两个const。

代码看起来是这样的：

​

const suprqMean = 3.93;
const usabilityMean = 4.06;

const suprqSD = 0.29;
const usabilitySD = 0.29; 

{
  const input = document.querySelector("#formGroupExampleInput");
  const log = document.getElementById("#suprq");

  input.addEventListener("change", updateValue);

  function updateValue(e) {
    suprq.textContent = (e.target.value - suprqMean) / suprqSD;
  }
}

{
  const input = document.querySelector("#formGroupExampleInput1");
  const log = document.getElementById("#usability");

  input.addEventListener("change", updateValue);

  function updateValue(e) {
    usability.textContent = (e.target.value - usabilityMean) / usabilitySD;
  }
}

<form class="leftForm container">
  <div class="form-group">
    <label for="formGroupExampleInput">SUPR-Q raw</label>
    <input type="number" class="form-control" id="formGroupExampleInput" placeholder="SUPR-Q raw">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Usability raw</label>
    <input type="number" class="form-control" id="formGroupExampleInput1" placeholder="Usability raw">
  </div>
</form>

<table class="table table-striped table-dark">
  <thead>
    <tr>

      <th scope="col">Z-Score</th>
      <th scope="col">Result</th>

    </tr>
  </thead>
  <tbody>
    <tr>

      <td>SUPR-Q:</td>
      <td id="suprq"></td>

    </tr>
    <tr>

      <td>Usability:</td>
      <td id="usability"></td>

    </tr>
  </tbody>
</table>

​

但是JS代码看起来糟透了。有任何方法来优化JS代码吗？我希望结果是实时输入，因为它现在的工作。

Answer 1

这里是一个“浓缩”版本

​

const values = {
  suprqMean: 3.93,
  usabilityMean: 4.06,
  suprqSD: .29,
  usabilitySD: .29
};
["suprq", "usability"].map((slug => {
  document.querySelector(`#${slug}Input`).addEventListener("change", (clicked => {
    document.getElementById(`${slug}`).textContent = (clicked.target.value - values[`${slug}Mean`]) / values[`${slug}SD`]
  }))
}));

<form class="leftForm container">
  <div class="form-group">
    <label for="formGroupExampleInput">SUPR-Q raw</label>
    <input type="number" class="form-control" id="suprqInput" placeholder="SUPR-Q raw">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Usability raw</label>
    <input type="number" class="form-control" id="usabilityInput" placeholder="Usability raw">
  </div>
</form>

<table class="table table-striped table-dark">
  <thead>
    <tr>

      <th scope="col">Z-Score</th>
      <th scope="col">Result</th>

    </tr>
  </thead>
  <tbody>
    <tr>

      <td>SUPR-Q:</td>
      <td id="suprq"></td>

    </tr>
    <tr>

      <td>Usability:</td>
      <td id="usability"></td>

    </tr>
  </tbody>
</table>

​

Answer 2

您可以通过检查内部的e.target.id将这两个函数组合成一个函数，并同时选择两个输入值来循环并添加事件侦听器：

​

const suprqMean = 3.93;
const usabilityMean = 4.06;
const suprqSD = 0.29;
const usabilitySD = 0.29;

document.querySelectorAll("[id^=formGroupExampleInput").forEach(el => {
  el.addEventListener("change", updateValue);
});

function updateValue(e) {
  inpVer = e.target.id === "formGroupExampleInput" ? true : false;
  outEl = inpVer ? suprq : usability;
  outVal = inpVer ? (e.target.value - suprqMean) / suprqSD : (e.target.value - usabilityMean) / usabilitySD;
  outEl.textContent = outVal;
}

<form class="leftForm container">
  <div class="form-group">
    <label for="formGroupExampleInput">SUPR-Q raw</label>
    <input type="number" class="form-control" id="formGroupExampleInput" placeholder="SUPR-Q raw">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Usability raw</label>
    <input type="number" class="form-control" id="formGroupExampleInput1" placeholder="Usability raw">
  </div>
</form>

<table class="table table-striped table-dark">
  <thead>
    <tr>

      <th scope="col">Z-Score</th>
      <th scope="col">Result</th>

    </tr>
  </thead>
  <tbody>
    <tr>

      <td>SUPR-Q:</td>
      <td id="suprq"></td>

    </tr>
    <tr>

      <td>Usability:</td>
      <td id="usability"></td>

    </tr>
  </tbody>
</table>

​

Answer 3

看起来您在JS代码中重复了自己的一些内容。

解决这一问题的通常方法是将重复的代码重构为可重用的函数：

const suprqMean = 3.93;
const usabilityMean = 4.06;

const suprqSD = 0.29;
const usabilitySD = 0.29;


function listenForChanges (inputId, logId, output, mean, SD) {
  const input = document.querySelector(inputId);
  const log = document.querySelector(logId);

  input.addEventListener("change", updateValue);

  function updateValue(e) {
    output.textContent = (e.target.value - mean) / SD;
  }
}

listenForChanges("#formGroupExampleInput", "#suprq", suprq, suprqMean, suprqSD)
listenForChanges("#formGroupExampleInput1", "#usability", usability, usabilityMean, usabilitySD)

不过，其他的感觉很奇怪。在原始代码段(在我的代码段中也是如此)中，引用了两个从未声明过的变量：suprq和usability。

但除此之外，您是否喜欢使用函数作为第一步，使代码不那么“糟糕”呢？

如果您有很多这样的功能，那么下一步可能是为所有输入对创建一个数据结构，并使用一个循环对每对调用此函数：

const all = [{
  inputId: "#formGroupExampleInput",
  logId: "#suprq",
  output: suprq,
  mean: 3.93,
  SD: 0.29
}, {
  inputId: "#formGroupExampleInput1",
  logId: "#usability",
  output: usability,
  mean: 4.06,
  SD: 0.29
}]

all.forEach(listenForChanges)

function listenForChanges ({inputId, logId, output, mean, SD}) {
  const input = document.querySelector(inputId);
  const log = document.querySelector(logId);

  input.addEventListener("change", updateValue);

  function updateValue(e) {
    output.textContent = (e.target.value - mean) / SD;
  }
}

注意，我在这里稍微修改了这个函数，让它接受一个对象参数，而不是一系列参数。这只是为了更容易地将所有东西与forEach粘合在一起。