Java Script not working in Google App Script HTML

Question

I am using Google App Script to build a little web app. I'm just at the very start and the page charges well on both Chrome and Firefox but I can't get anything to happen on click of the log in button. I don't get any log to the logger, neither do I get the alert to pop up. Does anyone have any idea why?

This it the HTML of 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>

And this is the code:


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(); 
}

And just in case, this is the HTML for HTML_StockManagementMenu, just displaying a title for now:

  <!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>

I tried earlier to break down my code with the fuction InsertHTMLScript that I have written in the code, inserting <?!= InsertHTMLScript("HTML_CSS"); ?> into the HTML code and it didn't work either. I don't known if it's related but I just resolve not to use it to make things easier.

Thank you in advance

I don't think you want to run the click addEventListener until after the DOM has loaded. You could avoid the problem by using onClick="function();" I realize is kind of old school but it's a lot easier. — Cooper
– Cooper, Commented May 23, 2019 at 23:58
Your function returns HTML. Your client-side HTML never uses the return value of the asynchronous call to the server. You need to update (rewrite) the entire DOM in a success handler. — tehhowch
– tehhowch, Commented May 24, 2019 at 4:27

Kenan Balija · Accepted Answer · 2019-05-24 00:29:50Z

1

You misspelled getElementById

You have:

document.getElementByID('LogInButton');

It should be:

document.getElementById('LogInButton');

Here is the official docs: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

answered May 24, 2019 at 0:29

Kenan Balija

7031 gold badge7 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Java Script not working in Google App Script HTML

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related