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;
}

或如果divs类名称不同（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;
}

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

3 个答案: