google-apps-scriptloggingweb-applications

Google Script Web App HTML Logging Issues

I'm learning how to use Google Web App and am following this YouTube video Google Sheets Web App Example - Google Apps Script Web App Tutorial - Part 1 and I am really enjoying the series. It is very easy to follow along with the videos. But I am running into a little issue with the first video. For some reason when I try to do log the button click on the HTML page, nothing happens. I sure it's going to be something silly. But I have been at this now for a few hours and I can't figure out what is wrong.

Code.gs:

function doGet(e) {
  
  Logger.log(e.parameter);
  return HtmlService.createHtmlOutputFromFile("page");
  
}

function userClicked(name){
  Logger.log(name + " & noah clicked it!");
}

page.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    
    <h1>Hello</h1>
    <label>Name:</label><input type="text" id="username">
    <button id="btn">Run It!</button>
    
    
    <script>
    
    document.getElementByID("btn").addEventListener("click",doStuff);
    
    function doStuff(){
    
    var uname document.getElementByID("username").value;
    
        google.script.run.userClicked(uname);
    }

    </script>
  </body>
</html>

Please tell me there is something silly that I am just not seeing.

Solution

  • I think that your script of HTML side is not correct. By this, the script is not run. So I think that Logger.log is not run. Please modify your script of HTML side as follows and test it again.

    Modification points:

    Modified script:

    From: 
    <script>

document.getElementByID("btn").addEventListener("click",doStuff);

function doStuff(){

var uname document.getElementByID("username").value;

    google.script.run.userClicked(uname);
}

</script>
    To: 
    <script>
document.getElementById("btn").addEventListener("click",doStuff);  // Modified

function doStuff(){
  var uname = document.getElementById("username").value;  // Modified
  google.script.run.userClicked(uname);
}
</script>

    IMPORTANT:

    References: