Question

如果这个问题太基础，我是新手学习javascript并道歉。我试图寻找一个解决方案，但我一点也不清楚。我已在此链接中创建此代码。

var btn = document.getElementById("calc");
btn.addEventListener("click", function() {
  var total = 0;
  var count = 0;
  var values = document.getElementsByClassName("value");
  for (var i = 0; i < values.length; i++) {
    var num = parseFloat(values[i].value);
    if (!isNaN(num)) {
      total += num;
      count++;
    }
  }
  output = total / count;
  var totalTb = document.getElementById("total");
  totalTb.value = count ? output : "NaN";

});

var btn = document.getElementById("calcTwo");
btn.addEventListener("click", function() {
  var total = 0;
  var count = 0;
  var values = document.getElementsByClassName("value");
  for (var i = 0; i < values.length; i++) {
    var num = parseFloat(values[i].value);
    if (!isNaN(num)) {
      total += num;
      count++;
    }
  }
  output = (total / count);
  var totalTb = document.getElementById("total");
  totalTb.value = output >= 90 ? "A" 
  : output >= 80 ? "B" 
  : output >= 70 ? "C" 
  : output >= 60 ? "D"
  : "YOU FAIL!";
});

我的问题是，如何在不必复制和粘贴相同代码的情况下为第二个“成绩”按钮使用相同的代码？

我看到你可以使用函数来调用相同的代码块，但我很困惑我会怎么做。如果这个问题已经得到解答，我道歉，但我一直在努力寻找，并试图自己解决这个问题。先谢谢你。

Answer 1

而不是将匿名函数（没有名称的函数）作为数据传递给事件处理程序：

btn.addEventListener("click", function() { ...

将这些功能设置为 "function declarations" ，以便您可以按名称调用它们。然后，不是将它们传递给.addEventListner()方法调用，而是按名称引用它们（名称旁边没有括号）。

以下是一个例子：

// Both buttons are configured to call the same event handling function:
document.getElementById("btn1").addEventListener("click", doSomething);
document.getElementById("btn2").addEventListener("click", doSomething);

function doSomething(){
  console.log("Hello!");
}

<input type=button id="btn1" value="Click Me">
<input type=button id="btn2" value="Click Me">

Answer 2

以下是如何在一个函数中组合公共代码：

var btn = document.getElementById("calc");
var btn2 = document.getElementById("calcTwo");
var totalTb = document.getElementById("total");
  
btn.addEventListener("click", function() {
  var output = getTotal();
  totalTb.value = output < Infinity ? output : "NaN";
});

btn2.addEventListener("click", function() {
  var output = getTotal();
  totalTb.value = output >= 90 ? "A" 
      : output >= 80 ? "B" 
      : output >= 70 ? "C" 
      : output >= 60 ? "D"
      : "YOU FAIL!";
});

function getTotal() {
  var total = 0;
  var count = 0;
  var values = document.getElementsByClassName("value");
  for (var i = 0; i < values.length; i++) {
    var num = parseFloat(values[i].value);
    if (!isNaN(num)) {
      total += num;
      count++;
    }
  }
  output = total / count;
  return output;
}

<form id="form1">
  <input class="value" type="text" value="80" /><br />
  <input class="value" type="text" value="50" /><br />
  <input class="value" type="text" value="15" /><br />
  <input class="value" type="text" value="30" /><br />
  <input class="value" type="text" value="90" /><br />
  <br />
  <input type="text" id="total" />
  <button type="button" id="calc">Calculate</button>
  <button type="button" id="calcTwo">Grade</button>
</form>

如何在javascript中重用代码块

2 个答案: