Google Apps 脚本网络应用程序。 价格乘以数量输入框

Question

我正在尝试创建一个定价计算器，以使我更容易为工作定价并保存它们。 我有一个包含多个下拉列表的表单，第一个下拉列表查找类别，第二个下拉列表将查找与类别匹配的品牌，然后第三个下拉列表将查找与类别和品牌匹配的名称。 一旦找到匹配的行，它将在底部显示价格，即

这意味着我在第一个下拉菜单中只有一个选项，即“计算机”，第二个下拉菜单中有两个选项“Apple 和 Windows”，根据选择，第三个下拉菜单将具有 iMac 或笔记本电脑。 选择后，1.99 英镑或 2.99 英镑的价格将显示在底部。

这（据我所知）100％有效，但我需要提高一个档次。 我现在有一个数量输入框，允许我选择数量（默认为 1）。 如果我改变数量，我想把价格乘以数量框中的数字。 我知道这是一项简单的任务，但我无法根据我的脚本来完成它。

这是我的代码：

这些是显示我的价格的代码部分。 一旦第三个下拉框被更改，它就会调用“displayUniquePrice”函数。 这是我需要进行计算的地方，我已经添加了从 qty-received 输入框中获取值的行，我只需要求和即可。

function afterThirdDropDownChanged() {
        var itemCategory = document.getElementById("item-category").value;
        var itemName = document.getElementById("item-name").value;
        var itemType = document.getElementById("item-type").value;
        var qtyRecieved = document.getElementById("qty-received").value;
        var itemPrice = document.getElementById("item-price"); 
        var filteredArrayOfValues = arrayOfValues.filter(function(r){ return r[0] === itemCategory && r[1] && r[2] === itemType});
        displayUniquePrice(itemPrice, filteredArrayOfValues, 3);
      }

function displayUniquePrice(el, arrayOfArrays, index) {
        var currentlyAdded = []
        el.innerHTML = '';
        arrayOfArrays.forEach(function(r){
          if(currentlyAdded.indexOf(r[index]) ===-1) {
            var option = document.createElement("div");
            option.textContent = r[index];
            el.appendChild(option);
            currentlyAdded.push(r[index]);
          }
        });
      }

我需要做类似的事情：

qtyReceived*filteredArrayOfValues but where?

这是完整的代码以防万一。

<!DOCTYPE html>
<html>
  <head>
    <title>Pricing Dropdown Menu</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet">  

<style>
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.form-group button:focus {
    outline: none;
    box-shadow:none;
}
.loading {
  background-color:black;
  width: 100vw;
  height: 100vh;
  position:fixed;
  top:0;
  left:0;
  z-index:10000;
}
.pt-40 {
padding-top:10rem;
}
  </style>
  </head>
  <body>
    <div class="container">
      <div id="userform">
        <div class="form-group">
          <label for="item-category">item category</label>
          <select class="form-control" id="item-category">
          </select>
        </div>
          <div class="form-group">
            <label for="item-name">item name</label>
            <select class="form-control" id="item-name">
            </select>
          </div>
          <div class="form-group">
            <label for="item-type">item type</label>
            <select class="form-control" id="item-type">
            </select>
          </div>
          <div class="form-group">
            <input id="arrival-time" type="checkbox" data-toggle="toggle" data-size="sm" data-on="Laminate<br>Needed" data-off="Laminate<br>Not Needed">
          </div>
          <div class="form-group">
            <label for="qty-received">qty received</label>
            <input type="number" class="form-control" id="qty-received" value=1 required>
            <div class="invalid-feedback">
              Please choose a quantity
            </div>
          </div>
          <div class="form-group">
            <label for="delivery-note">Delivery Note</label>
            <input type="text" class="form-control" id="delivery-note" required minlength="5">
            <div class="invalid-feedback">
              Please add a delivery Note with more than 5 characters
            </div>
          </div>
          <div class="form-group">
            <label for="comments">Notes</label>
            <textarea class="form-control" id="comments" rows="3" required></textarea>
            <div class="invalid-feedback">
              Please add your comments
            </div>
          </div>
          <div class="form-group">
            <label for="date-received">Date Received</label>
            <input type="date" class="form-control" id="date-received" required>
            <div class="invalid-feedback">
              Please choose a date
            </div>
          </div>

          <div>
            <div>item Price</label>
            <div id="item-price">
            </div>
          </div>
 
          <button class="btn btn-primary" id="mainButton">Add</button>
      </div>
      <div id="notification" class="mt-3">
        <div style="background-color:red;" id="errorNotification" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-delay="3000">
          <div class="toast-header">
            <strong class="mr-auto">Error</strong>
            <small>notification</small>
            <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="toast-body">
    One or more required fields were not completed.
          </div>
        </div>
        <div style="background-color:green;" id="successNotification" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-delay="3000">
          <div class="toast-header">
            <strong class="mr-auto">Success</strong>
            <small>notification</small>
            <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="toast-body">
    Row Added
          </div>
        </div>
      </div>
    </div>
    <div id="loading" class="loading pt-40">
      <div class="d-flex justify-content-center">
        <div>
        <div class="spinner-border text-light" style="width:4em; height:4em;" role="status">
          <span class="sr-only">Loading...</span>
        </div>
        <div>Loading...</div>
      </div>
      </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>
    <script>
      var arrayOfArrays;

      function afterButtonClicked(){
        if(validate()) {
          var itemCategory = document.getElementById("item-category");
          var itemName = document.getElementById("item-name");
          var itemType = document.getElementById("item-type");
          var arrivalTime = document.getElementById("arrival-time");
          var qtyReceived = document.getElementById("qty-received");
          var deliveryNote = document.getElementById("delivery-note");
          var comments = document.getElementById("comments");
          var dateReceived = document.getElementById("date-received");
          var arrivalTimeValue = arrivalTime.checked ? "On Time" : "Late";

          var rowData = {
            itemCategory: itemCategory.value, 
            itemName: itemName.value, 
            itemType: itemType.value, 
            arrivalTime: arrivalTimeValue,
            qtyReceived: qtyReceived.value,
            deliveryNote: deliveryNote.value,
            comments: comments.value, 
            dateReceived: dateReceived.value, 
          };
          google.script.run.withSuccessHandler(afterSubmit).addNewRow(rowData);
        } else {
          $('#errorNotification').toast('show')
        }
      }   
      function afterSubmit(e) {
        clearFields([
          "item-category",
          "item-name",
          "item-type",
          "arrival-time",
          "qty-received",
          "delivery-note",
          "comments",
          "date-received"
        ]);
        $('#successNotification').toast('show')
      }

      function clearFields(fields) { //clear fields
        fields.forEach(function(field){
          var el = document.getElementById(field);
          if(el.type === "checkbox") {
            el.checked = false;
            $('#' +el.id).bootstrapToggle('off');
          } else {
            el.value = "";
          }
         
        });
      }

      function validate() {
        var fieldsToValidate = document.querySelectorAll("#userform input, #userform textarea");
        Array.prototype.forEach.call(fieldsToValidate, function(el){
          if(el.checkValidity()) {
            el.classList.remove('is-invalid');
          } else {
            el.classList.add('is-invalid');
          }  
        });
        return Array.prototype.every.call(fieldsToValidate, function(el){
          return el.checkValidity();
        });
      }

      function afterSidebarLoads() {
        google.script.run.withSuccessHandler(afterDropDownArrayReturned).getDropDownArray(); 
      }
       
      function addUniqueOptionsToDropdownList(el, arrayOfArrays, index) {
        var currentlyAdded = []
        el.innerHTML = '';
        arrayOfArrays.forEach(function(r){
          if(currentlyAdded.indexOf(r[index]) ===-1) {
            var option = document.createElement("option");
            option.textContent = r[index];
            el.appendChild(option);
            currentlyAdded.push(r[index]);
          }
        });
      }
      function displayUniquePrice(el, arrayOfArrays, index) {
        var currentlyAdded = []
        el.innerHTML = '';
        arrayOfArrays.forEach(function(r){
          if(currentlyAdded.indexOf(r[index]) ===-1) {
            var option = document.createElement("div");
            option.textContent = r[index];
            el.appendChild(option);
            currentlyAdded.push(r[index]);
          }
        });
      }

      function afterDropDownArrayReturned(arrayOfArrays){
        arrayOfValues = arrayOfArrays.filter(function(r){return true;});
        var itemCategory = document.getElementById("item-category");
        addUniqueOptionsToDropdownList(itemCategory, arrayOfValues, 0);
        afterFirstDropDownChanged();
        afterSecondDropDownChanged();
        afterThirdDropDownChanged();
        document.getElementById("loading").remove();
      }

      function afterFirstDropDownChanged() {
        var itemCategory = document.getElementById("item-category").value;
        var itemName = document.getElementById("item-name");
        var filteredArrayOfValues = arrayOfValues.filter(function(r){ return r[0] === itemCategory});
        addUniqueOptionsToDropdownList(itemName, filteredArrayOfValues, 1);
        afterSecondDropDownChanged()
      }

      function afterSecondDropDownChanged() {
        var itemCategory = document.getElementById("item-category").value;
        var itemName = document.getElementById("item-name").value;
        var itemType = document.getElementById("item-type"); 
        var filteredArrayOfValues = arrayOfValues.filter(function(r){ return r[0] === itemCategory && r[1] === itemName});
        addUniqueOptionsToDropdownList(itemType, filteredArrayOfValues, 2);
        afterThirdDropDownChanged()
      }

      function afterThirdDropDownChanged() {
        var itemCategory = document.getElementById("item-category").value;
        var itemName = document.getElementById("item-name").value;
        var itemType = document.getElementById("item-type").value;
        var itemPrice = document.getElementById("item-price"); 
        var filteredArrayOfValues = arrayOfValues.filter(function(r){ return r[0] === itemCategory && r[1] && r[2] === itemType});
        displayUniquePrice(itemPrice, filteredArrayOfValues, 3);
      }

      document.getElementById("mainButton").addEventListener("click", afterButtonClicked);
      document.getElementById("item-category").addEventListener("change", afterFirstDropDownChanged);
      document.getElementById("item-name").addEventListener("change", afterSecondDropDownChanged);
      document.addEventListener("DOMContentLoaded", afterSidebarLoads);
      </script>
  </body>

</html>

任何帮助表示赞赏。

谢谢