Java Script не работает в Google App Script HTML - PullRequest
2 голосов
/ 24 мая 2019

Я использую Google App Script для создания небольшого веб-приложения.Я только в самом начале, и страница неплохо загружается как в Chrome, так и в Firefox, но я ничего не могу получить, нажав кнопку входа в систему.Я не получаю никакого журнала к регистратору, и при этом я не получаю предупреждение, чтобы появиться.Кто-нибудь знает, почему?

Это HTML-код HTML_StockManagementLogInPage:

  <!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-код для HTML_StockManagementMenu, просто пока показывающий заголовок:

  <!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-код, и он тоже не работал.Я не знаю, связано ли это, но я просто решил не использовать его, чтобы упростить задачу.

Заранее спасибо

1 Ответ

1 голос
/ 24 мая 2019

Вы неправильно написали getElementById

У вас есть:

document.getElementByID('LogInButton');

Должно быть:

document.getElementById('LogInButton');

Вот официальные документы: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...