如何重用javascript中的代码块

我是学习 javascript 的新手，如果这个问题太基础，我深表歉意。我试图寻找解决方案，但我什么都不清楚。我已在此链接中创建了此代码。

https://jsfiddle.net/5p7wzy9x/3/ https://jsfiddle.net/5p7wzy9x/3/

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!";
});

我的问题是，如何能够在第二个“成绩”按钮上使用相同的代码，而无需复制和粘贴相同的代码？

我看到您可以使用函数来调用相同的代码块，但我很困惑我将如何去做。如果这个问题已经得到解答，我很抱歉，但我已经努力搜索并尝试自己解决这个问题。提前谢谢您。

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

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

将这些函数设置为“函数声明” https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function以便您可以叫出他们的名字。然后，不要将它们传递到.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">