是否有更好的方法在两个单独的元素上运行此函数？

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>

​

Answer 2

在int的数字上执行此操作将使其成为可能，因此您可以对两者执行相同的操作。

function getSum(number) {
  var sum = 0;
  while (number > 0) {
    sum+=number %10;
    number /= 10;
  }
}

然后，你要做的就是

var num = document.getElementById('dateInput1').value;
num = getSum(parseInt(num));
document.getElementById("result1").textContent = "Your number is: " + num;

Answer 3

n将是ID/Class中的数字

function getSum(n) {
const input = document.getElementById('dateInput' + n).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("result" + n).textContent = "Your number is: " + total;
}

如果div类名不同(n1或输入id，n2用于结果id)，则可以使用该方法：

function getSum(n1, n2) {
const input = document.getElementById(n1).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(n2).textContent = "Your number is: " + total;
}