Question

我有一个网站，我可以在其中输入项目的金额，然后它将使用该输入值并在页面上返回结果。然后，我试图获取所有项目的结果并返回总计。

问题是当我循环执行此操作时，只会添加第一个。

我创建了一个小提琴：https://jsfiddle.net/rc1mgLj5/4/

我正在使用[ { "partition" : { "key" : [ "testrow" ], "position" : 0 }, "rows" : [ { "type" : "row", "position" : 65, "cells" : [ { "name" : "count", "value" : 422215477737628, "tstamp" : "2019-06-16T23:34:37.245893Z" } ] } ] }，并将所有querySelectorAll的长度用于第一次返回的结果。

然后在将它们解析为文本中的数字后将其循环。

但是目前，它仅在进行第一次计算。如果我删除了for循环，则第一部分将再次正常工作。

因此，由于它仅对第一项进行第一次计算，因此我得到className，因为它没有要解析的数字。

NaN

HTML：

const total = document.querySelectorAll(".tot");
const price = document.querySelectorAll(".cost");
let textval = document.querySelectorAll(".qty-item");
const cal = document.getElementById("calc");
const errorMessage = document.querySelectorAll(".error");

cal.addEventListener("mouseover", function(e) {
  console.log(total);
  for (var i = 0; i < price.length; i++) {
    let xPrice = price[i].innerHTML.split("$");
    let parsePrice = parseFloat(xPrice[1]);
    if (textval[i].value === "" || isNaN(textval[i].value)) {
      setMessage("Please enter a number", "red");
    } else {
      let x = parseFloat(textval[i].value);
      let y = parsePrice;

      let z = x * y;

      total[i].innerText = z.toFixed(2);

      total[i].innerText = z;

      for (i = 0; i < total.length; i++) {
        let j = parseFloat(total[i].innerHTML);

        console.log(j);
      }
    }
  }
});

Answer 1

您要使用与索引相同的for变量来嵌套两个i：

cal.addEventListener('mouseover', function(e) {
  console.log('total', total);
  for (var i = 0; i < price.length; i++) {
      //...

      for (i = 0; i < total.length; i++) {           // <== uses "i" again
        let j = parseFloat(total[ii].innerHTML);

        console.log(j);

      }
    }
  }
});

只需用另一个名称替换第二个for变量。示例：

for (let k = 0; k < total.length; k++) {
  let j = parseFloat(total[k].innerHTML);
  console.log(j);
}

演示：https://jsfiddle.net/acdcjunior/gpLvszx3/

Answer 2

尝试这样的事情

const qItem = document.querySelectorAll('.qty-item');
let result  = 0;
qItem.forEach((item) => {
    let value = parseFloat(item.value);
    if (!Number.isNaN(value)) {  // checks for number
        result += value;
    }
});
console.log(result);

Answer 3

似乎您在两个循环中都使用了相同的变量“ i”，并且在第二个循环中将i重置为3，因此主循环仅运行一次。所以我删除了以下代码，并计算了总的外部主循环。似乎现在工作正常。 https://jsfiddle.net/uxr7ac9k/7/

total[i].innerText = z;
for (i=0;i < total.length; i++){
    let j = parseFloat(total[i].innerHTML);
    console.log(j);
}

从输入中添加生成的值

3 个答案: