javascript - 如何定义事件处理函数来组合事件监听器

Question

我正在制作一个用于简单税收计算的网页，其 javascript 如下所示。我有一个问题说明

1. 定义一个将连接到计算按钮的事件处理函数。这是您应该进行所有计算的地方，然后将结果放入销售税和总计字段中。您还需要对小计和税率字段中的数据进行一些基本验证，请参见下面的项目符号。

2. 定义将连接到清除按钮的事件处理函数。在此功能中，您应该清除所有字段，然后将光标放回小计字段中，以便为新输入做好准备。研究如何将焦点设置在表单元素上。

3. 定义将用于初始化或设置应用程序的事件处理函数。此事件处理程序只需要将其他两个事件侦听器绑定到按钮的代码。在这个函数中，为两个按钮添加事件监听器，点击事件，并为每个按钮调用正确的事件处理函数。第 3 题我该怎么做？

   <script>
         function calcTax() {
           console.log("Tax Calculator works");
           let mySubtotal = Number(document.getElementById("subtotal").value);
           let myTaxRate = Number(document.getElementById("taxRate").value);
   
           if (isNaN(mySubtotal)) {
             alert("Subtotal should be a number to Calculate Tax");
             document.getElementById("subtotal").value = "";
             document.getElementById("subtotal").focus();
           } else if (mySubtotal <= 0) {
             alert("Subtotal should be greater than 0");
             document.getElementById("subtotal").value = "";
             document.getElementById("subtotal").focus();
           } else if (isNaN(myTaxRate)) {
             alert("Tax Rate should be a number to Calculate Tax");
             document.getElementById("taxRate").value = "";
             document.getElementById("taxRate").focus();
           } else if (myTaxRate <= 0 || myTaxRate > 20) {
             alert("Tax Rate should be between 0 and 20");
             document.getElementById("taxRate").value = "";
             document.getElementById("taxRate").focus();
           } else {
             document.getElementById("salesTax").value =
               (mySubtotal * myTaxRate) / 100;
             document.getElementById("mytotal").value =
               mySubtotal + (mySubtotal * myTaxRate) / 100;
           }
         }
   
         document.getElementById("taxCalc").addEventListener("click", calcTax);
         document.getElementById("clearBtn").addEventListener("click", function() {
             document.getElementById("subtotal").value = "";
             document.getElementById("subtotal").focus();
             document.getElementById("taxRate").value = "";
             document.getElementById("salesTax").value = "";
             document.getElementById("mytotal").value = "";
           });
   
         window.onload = function () {
           document.getElementById("subtotal").focus();
         };
       </script>
   

标签： javascripthtml

Answer 1

您应该将addEventListener调用移动到一个新函数中，并且应该为清除按钮的操作创建一个函数，以便您也可以将其称为“您自己”：

function clear() {
    document.getElementById("subtotal").value = "";
    document.getElementById("subtotal").focus();
    document.getElementById("taxRate").value = "";
    document.getElementById("salesTax").value = "";
    document.getElementById("mytotal").value = "";
}

function init() {
    document.getElementById("taxCalc").addEventListener("click", calcTax);
    document.getElementById("clearBtn").addEventListener("click", clear);
    clear(); // also call immediately as part of the initialisation
}

你window.onload会打电话给init()：

window.onload = init;

请注意，现在将调用页面加载 init，这将调用clear，这将设置焦点。