Google Web应用中HTML表单行内表格元素值相乘功能失效

我正在做一个表格形式的订单表单，用户能在每行输入所需产品的数量，对应“value”元素要显示数量×对应价格×5的计算结果。这个表单作为Google Web应用加载，用Apps Script从Google Sheet拉取表格数据。目前表单能正常加载数据，但计算功能一直没法正常工作——点击底部的“Place Order”按钮时，虽然URL里能看到numberUsed的参数，看起来元素值在更新，但我就是没法拿到这些值来计算并显示到“value”里。我刚学编程，肯定是漏了基础操作或者犯了低级错误，折腾好几个星期了，试了各种参考案例都没用，求帮忙！

我当前的代码（有问题的版本） #

//var numRows;
document.addEventListener('DOMContentLoaded', function() {
//new
var elems = document.querySelectorAll('cart');
var instances = M.FormSelect.init(elems);
// end new
document.getElementByname("cart").addEventListener("submit", getValues); //used to submit form - needs validation
//document.getElementByName("numberUsed").addEventListener("oninput",getValues);//used to submit form - needs validation
});
function test(event) {
"use strict";
event.preventDefault();
console.log("getValues function triggered");
}
function getValues() {
event.preventDefault();
var rows = document.querySelectorAll("package-row");
rows.forEach(function(currentRow) {
var numberUsed = Number(currentRow.querySelector('#numberUsed').value);
var price = Number(currentRow.querySelector('#price').value);
//var inPackage = Number(currentRow.querySelector('#inPackage').value);
var inPackage = 1;
var revenue = 1;
document.querySelectorAll('numberUsed');
if (numberUsed == "") {
if (isNaN(inPackage) || isNaN(price)) {
return;
}
revenue = price * inPackage;
} else {
if (isNaN(numberUsed) || isNaN(price)) {
return;
}
revenue = price * numberUsed;
}
var value = revenue * 5;
//currentRow.querySelector("#revenue").innerHTML = revenue;
currentRow.querySelector("#value").innerHTML = value;
});
}

问题排查与修复方案 #

我帮你梳理了代码里的几个关键问题，都是新手容易踩的坑，一个个来解决：

1. 选择器错误（最核心的问题） #

你代码里的选择器大多漏了符号：

• document.querySelectorAll('cart')：如果cart是表单的类名，要写成.cart；如果是ID，写成#cart，否则会被当成标签名（比如<cart>标签，显然你不是用这个）
• document.querySelectorAll("package-row")：同理，package-row是行的类名的话要加.，变成.package-row
• 重复ID问题：你每行都用#numberUsed、#price、#value这些ID，这是HTML规范不允许的！ID是页面唯一的，重复的话querySelector只会拿到第一个匹配的元素，后面的行根本取不到值。应该把这些改成类名，比如.number-used、.price、.value

2. 事件绑定的拼写错误 #

document.getElementByname是拼写错误，正确的是document.getElementsByName（注意是复数Elements，而且是ByName大写B），不过更建议给表单加个唯一ID，用getElementById绑定事件，更可靠。

3. 数值处理逻辑问题 #

• if (numberUsed == "")：当用户输入0时，Number("0")是0，会进入这个分支，逻辑不对，应该改成判断是否为有效数字
• 没有处理空值或非数字的情况，容易出现NaN的结果

4. 可选：添加实时计算功能 #

你原来只在提交时计算，用户体验不好，可以给每个数量输入框绑定input事件，输入时立刻计算结果。

修复后的完整代码示例 #

先修正HTML结构（假设你的表单结构） #

<form id="cart-form">
  <!-- 从Google Sheet拉取的每行数据 -->
  <div class="package-row">
    <input type="number" class="number-used" placeholder="输入数量" min="0">
    <span class="price">15</span> <!-- 价格从Sheet加载，用span显示 -->
    <span class="value"></span> <!-- 显示计算结果 -->
  </div>
  <div class="package-row">
    <input type="number" class="number-used" placeholder="输入数量" min="0">
    <span class="price">25</span>
    <span class="value"></span>
  </div>
  <button type="submit">Place Order</button>
</form>

修正后的JavaScript代码 #

document.addEventListener('DOMContentLoaded', function() {
  // 初始化Materialize组件（如果使用了的话）
  const elems = document.querySelectorAll('.cart');
  const instances = M.FormSelect.init(elems);

  // 绑定表单提交事件（用ID选择器更可靠）
  const cartForm = document.getElementById('cart-form');
  if (cartForm) {
    cartForm.addEventListener('submit', handleSubmit);
  }

  // 给每个数量输入框绑定实时计算事件
  const numberInputs = document.querySelectorAll('.number-used');
  numberInputs.forEach(input => {
    input.addEventListener('input', calculateSingleRow);
  });
});

// 计算单行的结果
function calculateSingleRow(event) {
  // 从输入框找到对应的行
  const currentRow = event.target.closest('.package-row');
  if (!currentRow) return;

  // 获取数量和价格，空值或非数字时设为0
  const numberUsed = Number(currentRow.querySelector('.number-used').value) || 0;
  const price = Number(currentRow.querySelector('.price').textContent) || 0;

  // 计算逻辑
  const revenue = price * numberUsed;
  const value = revenue * 5;

  // 更新结果显示，保留两位小数更规范
  const valueElement = currentRow.querySelector('.value');
  if (valueElement) {
    valueElement.textContent = value.toFixed(2);
  }
}

// 表单提交处理函数
function handleSubmit(event) {
  event.preventDefault(); // 阻止默认提交行为
  console.log('表单提交触发，先确认所有行计算正确');

  // 先重新计算所有行，确保结果最新
  const rows = document.querySelectorAll('.package-row');
  rows.forEach(row => {
    const input = row.querySelector('.number-used');
    if (input) {
      input.dispatchEvent(new Event('input'));
    }
  });

  // 这里可以添加提交到Google Sheet的逻辑
  console.log('所有行计算完成，准备提交数据');
}

修复点说明 #

• 所有类选择器都加上了.，ID只用于唯一元素（比如表单），避免了重复ID的问题
• 修正了事件绑定的拼写错误，确保能正确找到表单元素
• 添加了实时计算功能，用户输入数量时立刻更新结果
• 优化了数值处理，用|| 0避免NaN，用toFixed(2)让结果显示更友好
• 用closest('.package-row')高效定位当前输入框所在的行，逻辑更清晰

内容的提问来源于stack exchange，提问作者Paul S