Javascript 在 Google App Script HTML 中不起作用答案

【问题标题】：Java Script not working in Google App Script HTMLJavascript 在 Google App Script HTML 中不起作用
【发布时间】：2019-05-23 23:38:29
【问题描述】：

我正在使用 Google App Script 构建一个小型网络应用程序。我才刚开始，页面在 Chrome 和 Firefox 上的收费都很好，但是单击登录按钮时我什么也没有发生。我没有收到任何日志到记录器，也没有弹出警报。有人知道为什么吗？

这是 HTML_StockManagementLogInPage 的 HTML：

  <!DOCTYPE html>
  <html>
    <head>
      <base target = "_top">
      <script src="js/jquery-1.7.1.min.js"></script>
      <script src="js/yourscript.js"></script>
      <!-- Compiled and minified CSS -->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

      <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
      <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>

      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>


      <div class="container">
        <center><h4> Stock Management Log In </h4></center>
        <div class="row">
          <center>
            <div class="input-field col s3"></div>
            <div class="input-field col s3">
              <input id="first_name" type="text" class="validate">
              <label for="first_name">First Name</label>
            </div>
            <div class="input-field col s3">
              <input id="last_name" type="text" class="validate">
              <label for="last_name">Last Name</label>
            </div>
          </center>
        </div> <!-- END OF ROW -->
        <div class="row">
           <center><button class="btn waves-effect waves-light" type="submit" id="LogInButton">Log In
             <i class="material-icons right">send</i>
           </button></center>
        </div>  <!-- END OF ROW -->
      </div> <!-- END OF CONTAINER -->


      <!--JavaScript at end of body for optimized loading-->
      <script type="text/javascript" src="js/materialize.min.js"></script>
      <!-- Compiled and minified JavaScript -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

      <script>

        document.getElementByID("LogInButton").addEventListener("click",LogInClicked);
        function LogInClicked(){
          var UserName1 = {};

          UserName1.FirstName = document.getElementByID("first_name").value;
          UserName1.LastName = document.getElementByID("last_name").value;
          alert(UserName1.FirstName + " " + UserName1.LastName);

          google.script.run.UserLoggedIn(UserName1);

        } // END FUNCTION LOGIN

      </script>

    </body>
  </html>

这是代码：


function doGet() {

  return HtmlService.createTemplateFromFile("HTML_StockManagementLogInPage").evaluate();
  //return HtmlService.createHtmlOutputFromFile("HTML_StockManagementInterfacePage");

}

function InsertHTMLScript(HTMLFilename) {
  return HtmlService.createHtmlOutputFromFile(HTMLFilename).getContent();
}

function UserLoggedIn(UserName){

  logger.log(UserName.FirstName + " clicked the button");
  return HtmlService.createTemplateFromFile("HTML_StockManagementMenu").evaluate(); 
}

为了以防万一，这是 HTML_StockManagementMenu 的 HTML，现在只显示一个标题：

  <!DOCTYPE html>
  <html>
    <head>
      <base target = "_top">
      <!-- Compiled and minified CSS -->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

      <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
      <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>

      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>


      <div class="container">
        <h1> Stock Management Menu </h1>

      </div> <!-- END OF CONTAINER -->


      <!--JavaScript at end of body for optimized loading-->
      <script type="text/javascript" src="js/materialize.min.js"></script>
      <!-- Compiled and minified JavaScript -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>


    </body>
  </html>

我之前尝试使用我在代码中编写的函数InsertHTMLScript 分解我的代码，将<?!= InsertHTMLScript("HTML_CSS"); ?> 插入到HTML 代码中，但它也不起作用。我不知道它是否相关，但我只是决定不使用它来让事情变得更容易。

提前谢谢你

【问题讨论】：

我不认为你想在 DOM 加载之前运行click addEventListener。你可以通过使用onClick="function();" 来避免这个问题，我知道这有点老派，但要容易得多。
您的函数返回 HTML。您的客户端 HTML 从不使用对服务器的异步调用的返回值。您需要在成功处理程序中更新（重写）整个 DOM。

标签： javascript html google-apps-script

【解决方案1】：

你拼错了 getElementById

你有：

document.getElementByID('LogInButton');

应该是：

document.getElementById('LogInButton');

这里是官方文档：https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

【讨论】：