时间戳

首页 > 解决方案 > html表单行上两个输入表元素值的乘法不起作用（Google Webapp）

javascript - html表单行上两个输入表元素值的乘法不起作用（Google Webapp）

问题描述

我正在尝试将订单创建为表格，其中用户连续输入产品所需的数量，并通过将用户输入乘以表格同一行的另一个元素中的价格来计算相应的值.

该表单通过 Google 作为 WebApp 加载，并使用 Apps 脚本从 Google Sheet 中检索表值。表单按预期加载数据，但我无法让计算部分正常工作。

如果我单击表单底部的“下订单”按钮，numberUsed 值将作为参数包含在 URL 中，因此看起来这些元素中的值正在更新，但我无法访问它们来做计算并将其显示在称为“值”的元素中。

我是一名新手程序员，所以我确信这是我做错（或没有​​做）的基本问题。我创建了一个 JSBin https://jsbin.com/siwerat/edit?html,js,console,output并且在过去的几周里我尝试了从其他答案和视频中派生的几种代码变体但没有成功，所以任何帮助都会不胜感激。

//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;
  });

}

标签： javascripthtmlgoogle-apps-script

解决方案

感谢拉法的指导。经过进一步阅读/分析，我已经开始工作了。Learn Google Spreadsheets 的事件冒泡视频：[https://www.youtube.com/watch?v=fYpGe5ngujk][1] 和 EncodeDNA.com 上的一篇文章（使用 Javascript 动态创建 HTML 表格和按钮）帮助缩小了范围问题我必须得到解决方案。

推荐阅读