如何通过同一行另一列的一个文本框中的输入获取值

how to get value by an input in one textbox from another column the same row

我有一个包含两个文本框的 html 文件 1.orders 1.amount 我希望当我在订单文本框中输入数字时 我将从我的 Google Sheet 中的另一列中获取与此订单匹配的同一行中的值

这是我的Code.gs代码，它不起作用

    function doGet(e) {
  
 return HtmlService.createHtmlOutputFromFile('page');
}




function getCost(oneCode){
  
  var url = "https://docs.google.com/spreadsheets/d/1333t7lvECnmOcCnTE6gnn_RN1wrPckWpIETiPUjkUnU/edit#gid=0";
  var ss = SpreadsheetApp.openUrl(url);
  var ws = ss.getSheetByName("Sheet1");
  var data = ws.getRange(1,1,ws.getLastRow(),2).getValues();
  
  var ordersList = data.map(function(r){ return r[0]; });
  var amountList = data.map(function(r){ return r[1]; });
  
  
  var position = ordersLis.indexOf(oneCode);
  if(position > -1){
    return amountList[position];
 
  } else {
    return "not found";
    
  }
  
}

======================== 这是 html 代码

    <!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <script>
  document.getElementById("one").addEventlistener("input",doThis);
  
  function doThis(){
  
  var oneCode = document.getElementById("one").value;
  
  
  
  google.script.run.withSuccessHandler(updateAmount).getCost(oneCode);
  
  }
  
  function updateAmount(cost){
  
  document.getElementById("two").value = cost;
  
  }
  
  </script>
  <body>
  <div>
    <input id="one" type="text">
    <label for="one">orders</label>
    </div>
    <div>
    <input disabled id="two" type="text">
    <label for="two">amount</label>
    </div>
    
    
  </body>
</html>

我想提出以下修改。

修改点：

  • 在HTML&Javascript一侧，

    • addEventlistener 是 addEventListener.

    • 使用您的脚本时，请修改document.getElementById("one").addEventListener("input",doThis);如下。因为不使用 document.addEventListener("DOMContentLoaded", function)时，在addEventListener.

      处出错 
        document.addEventListener("DOMContentLoaded", function(){
    document.getElementById("one").addEventListener("input",doThis);
  });

    • 当input作为事件类型时，当输入的文本为130、1、13和[=19=时] 发送。这样，google.script.run.withSuccessHandler(updateAmount).getCost(oneCode) 是 运行 的 3 倍。所以我认为change可能适合这种情况。

  • 在 Google Apps 脚本端，

    • 在 var ss = SpreadsheetApp.openUrl(url);，openUrl 是 openByUrl。
    • 我认为在您的脚本中，var position = ordersLis.indexOf(oneCode); 是 var position = ordersList.indexOf(oneCode);。
    • 在您的脚本中，getCost(oneCode) 的 oneCode 是字符串类型。

当以上几点反映到你的脚本中，就会变成下面这样。

修改后的脚本：

HTML&Javascript 边:

<!DOCTYPE html>
<html>

<head>
  <base target="_top">
</head>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    document.getElementById("one").addEventListener("change", doThis);
  });

  function doThis() {
    var oneCode = document.getElementById("one").value;
    google.script.run.withSuccessHandler(updateAmount).getCost(oneCode);
  }

  function updateAmount(cost) {
    document.getElementById("two").value = cost;
  }
</script>

<body>
  <div>
    <input id="one" type="text">
    <label for="one">orders</label>
  </div>
  <div>
    <input disabled id="two" type="text">
    <label for="two">amount</label>
  </div>
</body>

</html>
  • 当<script>###</script>在HTML的底部时，我认为document.addEventListener("DOMContentLoaded", function() {})不需要使用。

Google Apps 脚本端：

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('page');
}

function getCost(oneCode){
  var url = "https://docs.google.com/spreadsheets/d/1333t7lvECnmOcCnTE6gnn_RN1wrPckWpIETiPUjkUnU/edit#gid=0";
  var ss = SpreadsheetApp.openByUrl(url);
  var ws = ss.getSheetByName("Sheet1");
  var data = ws.getRange(1,1,ws.getLastRow(),2).getValues();
  var ordersList = data.map(function(r){ return r[0].toString(); });
  var amountList = data.map(function(r){ return r[1].toString(); });
  var position = ordersList.indexOf(oneCode);
  if(position > -1){
    return amountList[position];
  }
  return "not found";
}

用法：

  • 从您的脚本来看，您似乎正在使用网络应用程序。 当您使用此脚本时，请将以上脚本复制粘贴到脚本编辑器中，并重新部署Web Apps为新版本。由此，最新的脚本被反​​映到Web Apps。请注意这一点。
  • 当Web Apps打开时，请在输入框输入一个值并按回车键或从输入框移除焦点。至此，addEventListener("change", doThis)被执行，doThis为运行.

参考文献：