javascript - 有没有更好的方法在两个独立的元素上运行这个函数？

Question

我有一个函数，可以将输入字段的数字汇总到一位数。

我有两个单独的输入字段，它们都将采用不同的数据。单击 HTML 按钮(带有 onClick)时，我想在两者上运行该函数。

如果不创建重复函数，我想不出一种方法来做到这一点。我知道有更好的方法，谁能给我一个主意？

function getSum1() {
const input = document.getElementById('dateInput1').value;
var sum = 0;
for (var i = 0; i < input.length; i++) {
    const num = parseInt(input.charAt(i));
    if (!isNaN(num)) {
        sum += num;
         }
    }
  const total = (sum - 1) % 9 + 1;
    document.getElementById("result1").textContent = "Your number is: " + total;
}
function getSum2() {
const input = document.getElementById('dateInput2').value;
var sum = 0;
for (var i = 0; i < input.length; i++) {
    const num = parseInt(input.charAt(i));
    if (!isNaN(num)) {
        sum += num;
         }
    }
  const total = (sum - 1) % 9 + 1;
    document.getElementById("result2").textContent = "Your number is: " + total;
}

---

<div class="container">
        <div class="cell-1"><input type="text" id="dateInput1"></div>
        <div class="cell-2"><img src="file:///Users/Nineborn/Downloads/My%20Post.png" alt=""></div>
        <div class="cell-3"><input type="text" id="dateInput2"></div>
        <div class="cell-4" id="result1"></div>
        <div class="cell-5"><button onclick="getSum1(); getSum2()">Calculate</button></div>
        <div class="cell-6" id="result2"></div>
        <div class="cell-7"></div>
        <div class="cell-8"></div>
        <div class="cell-9"></div>


    </div>

Answer 1

如果将输入和输出元素的 id 放入数组中，然后遍历输入数组，则可以执行与数组中的元素一样多的主要操作。

function getSum() {
  // Place the id's of the input and output elements into respective arrays
  let inputs = ['dateInput1','dateInput2'];
  let outputs = ['result1','result2'];
  
  // Loop over the items in the inputs array
  // This will cause you to loop as many times as there are input elements
  inputs.forEach(function(input, index){

    // Instead of hard-coding the element id, you get the element reference
    // from the .forEach callback function argument.
    const inputValue = document.getElementById(input).value;
    var sum = 0;
    for (var i = 0; i < inputValue.length; i++) {
      const num = parseInt(inputValue.charAt(i));
      if (!isNaN(num)) {
        sum += num;
      }
    }
    const total = (sum - 1) % 9 + 1;
    // And here, you reference the right output element, by using the corresponding
    // index from the inputs array.
    document.getElementById(outputs[index]).textContent = "Your number is: " + total;
  
  });
}

<div class="container">
        <div class="cell-1"><input type="text" id="dateInput1"></div>
        <div class="cell-2"><img src="file:///Users/Nineborn/Downloads/My%20Post.png" alt=""></div>
        <div class="cell-3"><input type="text" id="dateInput2"></div>
        <div class="cell-4" id="result1"></div>
        <div class="cell-5"><button onclick="getSum();">Calculate</button></div>
        <div class="cell-6" id="result2"></div>
        <div class="cell-7"></div>
        <div class="cell-8"></div>
        <div class="cell-9"></div>
</div>