时间戳

首页 > 解决方案 > 试图找出表值计算器的问题

javascript - 试图找出表值计算器的问题

问题描述

我在我正在处理的 HTML 和 JS 实践项目中遇到了一些麻烦，其中以下函数旨在计算用户的总费用成本。该程序给了我一个 date[i] 错误，然后我将其定义为表的一组 td 元素（使用调试器列出了日期）。但是，它随后给了我另一个具有不同功能的问题，指出：

未捕获的 DOMException：无法在“文档”上执行“querySelectorAll”：“。[object HTMLTableCellElement]”不是有效的选择器。

我担心我为此绕圈子，我想知道我做错了什么。对此的任何帮助将不胜感激。

带有完整代码的 Pastebin：https ://pastebin.com/My3xzyS4

最相关的代码：

function calcClass(sumClass) {
    var sumFields  = document.querySelectorAll("." + sumClass); //this is the one giving me issues
    var sumTotal = 0;
    for (var i = 0; i < sumFields.length; i++) {
      var itemValue = parseFloat(sumFields[i].value);
      if(!isNaN(itemValue)) {
        sumTotal += itemValue;
      }
    }
    return sumTotal;
  }

function calcExp() {  
    var expTable = document.querySelectorAll("table#travelExp tr");
    
    for (var i = 0; i < expTable.length; i++) {
      var date = document.querySelectorAll("table#travelExp td");
      document.getElementById("subtotal"+ [i]).value = formatNumber(calcClass(date[i]), 2);
    }
    document.getElementById("transTotal").value = formatNumber(calcClass(trans), 2);
    document.getElementById("lodgeTotal").value = formatNumber(calcClass(lodge), 2);
    document.getElementById("mealTotal").value = formatNumber(calcClass(meal), 2);
    document.getElementById("otherTotal").value = formatNumber(calcClass(other), 2);
    document.getElementById("expTotal").value = formatUSCurrency(calcClass(sum));
   }

function formatNumber(val, decimals) {
   return val.toLocaleString(undefined, {minimumFractionDigits: decimals, 
                                         maximumFractionDigits: decimals});
}

function formatUSCurrency(val) {
   return val.toLocaleString('en-US', {style: "currency", currency: "USD"} );

标签： javascripthtml

解决方案

我看到你做总和的方式：水平，每个日期，垂直，每个项目。现在，您的calcClass函数将类名作为输入，它是一个字符串。相反，您每次传递的都是一个变量。在第一个实例中，变量实际上是一个对象。因此出现错误：对象不能用作查询选择器。

为什么它是一个对象？

为什么这是一个对象？因为您上次使用 时date，它是作为一个变量来保存document.querySelectorAll("table#travelExp td")返回对象列表的结果。

现在，您在接下来的调用中遇到了类似的问题calcClass。

使固定

考虑到您已经巧妙地构建表格的方式，修复实际上非常简单：只需按照它们的意图制作这些字符串。所以，这样的事情应该有效。

function calcExp() {
    var expTable = document.querySelectorAll("table#travelExp tr");
    
    for (var i = 0; i < expTable.length; i++) {
      // var date = document.querySelectorAll("table#travelExp td");  // likely not needed
      document.getElementById("subtotal" + i).value = formatNumber(calcClass('date' + i), 2);
    }
    document.getElementById("transTotal").value = formatNumber(calcClass('trans'), 2);
    document.getElementById("lodgeTotal").value = formatNumber(calcClass('lodge'), 2);
    document.getElementById("mealTotal").value = formatNumber(calcClass('meal'), 2);
    document.getElementById("otherTotal").value = formatNumber(calcClass('other'), 2);
    document.getElementById("expTotal").value = formatUSCurrency(calcClass('sum'));
}

推荐阅读