文章/答案/技术大牛

发布

社区首页 >问答首页 >使用从Apps脚本/ javascript数组生成的按钮在html中设置一个值

问使用从Apps脚本/ javascript数组生成的按钮在html中设置一个值
EN

Stack Overflow用户

提问于 2022-08-18 18:07:10

回答 1查看 49关注 0票数 -1

我正试图拼凑一个Google脚本，用于触摸屏时钟系统，这涉及从电子表格中的数组中生成一些按钮，但我对如何让脚本记录这些自动生成的按钮中的哪一个已经被按下有点不知所措。

基本上，我使用的是这个脚本的修改版本(https://www.youtube.com/watch?v=KGhGWuTjJwc) --我需要它与触摸屏一起工作。

我已经得到了一个版本的脚本，在上面的视频工作。但是由于web应用程序必须在触摸屏上工作，所以我需要能够生成按钮来输入人员ID和PIN来替换文本框。

为此，我从谷歌工作表中提取了一个数组，其中包含登录所需的所有人员首字母，并添加了一个数字键盘以输入PIN。

我已经成功地从这里借来了一个键盘：https://github.com/ProgrammingHero1/batch5-pin-matcher-solution，但是我不得不尝试获取用于人员ID输入的use按钮。

我已经成功地从电子表格数组中生成了按钮，使用了这个从Javascript数组创建一个按钮数组的修改版本，但是我想不出如何设置staffid来匹配最后一个自动生成的按钮。目前这些按钮什么都不做。

如果有人能帮助指导我的最后一步，使工作人员设置使用按钮，而不是使用文本框，这将是非常感谢的。

下面是我正在使用的代码。我意识到这是狗的早餐--那是因为我把它从不同的来源中拼凑在一起(嗯，实际上远远超出了我理解的范围)！

总之，这里是HTML：

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <!-- Metro 4 -->
    <link rel="stylesheet" href="https://cdn.metroui.org.ua/v4/css/metro-all.min.css">
        <style>
      .main-box {
         max-width:500px;

      }

      .error-message {

        background:red;
        color:white
        padding: 1000px;
        border-radius: 1000px;

      }

      </style>

  </head>

  <body>

      <div class="container">

        <div class="container d-flex flex-justify-center pt-9">
      <div data-role="panel" class="main-box">
    <form id="main-form">
 
       <div class="form-group">
      

         

               
               <input type="text" data-role="input" data-prepend="Staff ID" id="staffid"> 

            
         
  
<div class="form-group">
  
  
  
  </div>

      <div class="form-group">

       
           
        <button id="start-work" class="button success" type="submit" data-action="Start work">Start work</button>
        <button id="finish-work" class="button success" type="submit" data-action="Finish work">Finish work</button>
        <button id="start-break" class="button success" type="submit" data-action="Start break">Start break</button>
        <button id="finish-break" class="button success" type="submit" data-action="Finish break">Finish break</button>
        
<div class="input-section half-width">
                    <input id="typed-numbers" class="form-control" type="text">
                    <div class="numbers">
                        <div id="key-pad" class="calc-body">
                            <div class="calc-button-row">
                                <div class="button">7</div>
                                <div class="button">8</div>
                                <div class="button">9</div>
                            </div>
                            <div class="calc-button-row">
                                <div class="button">4</div>
                                <div class="button">5</div>
                                <div class="button">6</div>
                            </div>
                            <div class="calc-button-row">
                                <div class="button">1</div>
                                <div class="button">2</div>
                                <div class="button">3</div>
                            </div>
                            <div class="calc-button-row">
                                <div class="button">&lt;</div>
                                <div class="button">0</div>
                                <div class="button">C</div>
                            </div>
                           
                        </div>
                    </div>
                </div>

      </div>
      </form>
      <div id="message" class="d-none error-message mt4">
      Error!!
      </div>
      </div>
    </div>

     

</body>
        

    <!-- Metro 4 -->
    <script src="https://cdn.metroui.org.ua/v4/js/metro.min.js"></script>
    

    <script>
    
    const TSPwebapp = {}

    TSPwebapp.onLoad = function(){
      TSPwebapp.form = document.getElementById("main-form")
      TSPwebapp.staffidInput = document.getElementById("staffid")
      TSPwebapp.pinInput = document.getElementById("typed-numbers")
      TSPwebapp.startWorkButton = document.getElementById("start-work")
      TSPwebapp.finishWorkButton = document.getElementById("finish-work")
      TSPwebapp.startBreakButton = document.getElementById("start-break")
      TSPwebapp.finishBreakButton = document.getElementById("finish-break")
      TSPwebapp.message = document.getElementById("message")

      TSPwebapp.form.addEventListener("submit",TSPwebapp.onSubmit)
      TSPwebapp.startWorkButton.addEventListener("click",TSPwebapp.startFinishWork)
      TSPwebapp.finishWorkButton.addEventListener("click",TSPwebapp.startFinishWork)
      TSPwebapp.startBreakButton.addEventListener("click",TSPwebapp.startFinishBreak)
      TSPwebapp.finishBreakButton.addEventListener("click",TSPwebapp.startFinishBreak)

    } // TSPwebapp.onLoad function

  TSPwebapp.onSubmit= function(e){
    e.preventDefault()
  } // TSPwebapp.onSubmit function

  TSPwebapp.startFinishWork = function(e){
    
    const payload = {
                      staffid: TSPwebapp.staffidInput.value,
                      pin: TSPwebapp.pinInput.value,
                      action: e.target.dataset.action
                    }
    
    google.script.run.withSuccessHandler(() => {

      TSPwebapp.staffidInput.value = ""
      TSPwebapp.pinInput.value = ""

    } ).withFailureHandler(() => {

      TSPwebapp.message.classList.remove("d-none")
      setTimeout(() => {TSPwebapp.message.classList.add("d-none")},5000)

    }).startFinishWork(payload)

  } // TSPwebapp.startFinishWork function

TSPwebapp.startFinishBreak = function(e){
    
    const payload = {
                      staffid: TSPwebapp.staffidInput.value,
                      pin: TSPwebapp.pinInput.value,
                      action: e.target.dataset.action
                    }
    
    google.script.run.withSuccessHandler(() => {

      TSPwebapp.staffidInput.value = ""
      TSPwebapp.pinInput.value = ""

    } ).withFailureHandler(() => {

      TSPwebapp.message.classList.remove("d-none")
      setTimeout(() => {TSPwebapp.message.classList.add("d-none")},5000)

    }).startFinishBreak(payload)

  } // TSPwebapp.startFinishBreak function



    </script>

  <script>

document.getElementById('key-pad').addEventListener('click', function (event) {
    const number = event.target.innerText;
    const calcInput = document.getElementById('typed-numbers');
    if (isNaN(number)) {
        if (number == 'C') {
            calcInput.value = '';
        }
    }
    else {
        const previousNumber = calcInput.value;
        const newNumber = previousNumber + number;
        calcInput.value = newNumber;
    }
});
 
</script>



<script>
                 
    document.addEventListener("DOMContentLoaded",TSPwebapp.onLoad)

    
document.addEventListener("DOMContentLoaded",function(){

google.script.run.withSuccessHandler(printBtn).useDataRange();


});

          
                function printBtn(staffData) {
                for (var i = 0; i < staffData.length; i++) {
                   var btn = document.createElement("button");
                   var t = document.createTextNode(staffData[i]);
                   btn.appendChild(t);
                  document.body.appendChild(btn);
                    }
                }
                
                window.onload = printBtn();

           </script>  

           </body>

</html>

下面是Google脚本代码：

function doGet(e) {
  
  Logger.log(e);
  return HtmlService.createHtmlOutputFromFile("form");
  
}

function useDataRange () {
const ss = SpreadsheetApp.getActiveSpreadsheet() 
const wsStaff = ss.getSheetByName("Staff")
const staffData = wsStaff.getRange(2,2,wsStaff.getLastRow()-1,1).getValues()
Logger.log(staffData)
return staffData;

}


function startFinishBreak(payload){

   console.log(payload)

if (!["Start work","Finish work","Start break","Finish break"].includes(payload.action)){
    throw new Error("Sign in or sign out failed")
    return
  }

console.log("Initial check passed")

  const ss = SpreadsheetApp.getActiveSpreadsheet() 
  const wsBreakData = ss.getSheetByName("Break data")
  const wsStaff = ss.getSheetByName("Staff")

  const staffData = wsStaff.getRange(2,2,wsStaff.getLastRow()-1,3).getValues()

  const matchingStaff = staffData.filter(r => r[0].toString() === payload.staffid && r[2].toString() === payload.pin)

  if(matchingStaff.length !== 1){
    throw new Error("Sign in or sign out failed")
    return
  }

    const idsData = wsBreakData.getRange(2,2,wsBreakData.getLastRow()-1,3).getValues()

  console.log(idsData)

    const matchingIdsData = idsData.filter(r => r[0].toString() === payload.staffid)

  console.log(matchingIdsData)

  const latestAction = matchingIdsData.length === 0 ? "Finish break" : matchingIdsData[matchingIdsData.length-1][2]
  
  if (latestAction === payload.action){
    throw new Error("Sign in or sign out failed")
    return
  }

  wsBreakData.appendRow([new Date(),payload.staffid,payload.pin,payload.action]) 

}

function startFinishWork(payload){

console.log(payload)

if (!["Start work","Finish work","Start break","Finish break"].includes(payload.action)){
    throw new Error("Sign in or sign out failed")
    return
  }

console.log("Initial check passed")

  const ss = SpreadsheetApp.getActiveSpreadsheet() 
  const wsWorkData = ss.getSheetByName("Work data")
  const wsStaff = ss.getSheetByName("Staff")

  const staffData = wsStaff.getRange(2,2,wsStaff.getLastRow()-1,3).getValues()

  const matchingStaff = staffData.filter(r => r[0].toString() === payload.staffid && r[2].toString() === payload.pin)

  if(matchingStaff.length !== 1){
    throw new Error("Sign in or sign out failed")
    return
  }

    const idsData = wsWorkData.getRange(2,2,wsWorkData.getLastRow()-1,3).getValues()

  console.log(idsData)

    const matchingIdsData = idsData.filter(r => r[0].toString() === payload.staffid)

  console.log(matchingIdsData)

  const latestAction = matchingIdsData.length === 0 ? "Finish work" : matchingIdsData[matchingIdsData.length-1][2]
  
  if (latestAction === payload.action){
    throw new Error("Sign in or sign out failed")
    return
  }

  wsWorkData.appendRow([new Date(),payload.staffid,payload.pin,payload.action]) 

}

我希望这个描述或多或少是有意义的--我正在尝试一种超越当前能力的方法，但我确实需要完成这个任务，希望我在这个过程中学习。

javascript

html

arrays

google-apps-script

button

回答 1

Stack Overflow用户

发布于 2022-08-18 19:52:54

您需要向每个按钮添加一个值和事件侦听器。然后，您可以使用该值来确定按下哪个按钮。

我已经更新了我的脚本，以解决以下评论。

首先增加一个新的分部。

<div id="staffButtons">
</div>
<div id="message" class="d-none error-message mt4">

接下来，对原始脚本进行一些更改，如图所示。

function printBtn(staffData) {
  let div = document.getElementById("staffButtons"); // add this
  for (var i = 0; i < staffData.length; i++) {
    var btn = document.createElement("button");
    var t = document.createTextNode(staffData[i]);
    btn.value = staffData[i]
    btn.addEventListner("click",buttonClick);
    btn.appendChild(t);
    div.appendChild(btn);  // change this
  }
}

function buttonClick() {
  document.getElementById("staffid") = this.value;
}

参考文献

addEventListener

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73407612

复制

相似问题

问使用从Apps脚本/ javascript数组生成的按钮在html中设置一个值
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用从Apps脚本/ javascript数组生成的按钮在html中设置一个值EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用从Apps脚本/ javascript数组生成的按钮在html中设置一个值
EN