Question

我正在使用Google App脚本来构建一个小型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

Java脚本无法在Google App脚本HTML中运行

1 个答案: