Question

Javascript 无法在 Google App Script HTML 中运行

2019-05-23

342

javascript html google-apps-script

我正在使用 Google App Script 构建一个小型 Web 应用程序。我才刚刚开始，页面在 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 代码中，但也没有用。我不知道这是否相关，但我决心不使用它来让事情变得更容易。

提前谢谢您

Answer 1

您拼错了 getElementById

您有：

document.getElementByID('LogInButton');

应该是：

document.getElementById('LogInButton');

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