button will not execute click function in google apps script html service

Question

I've spent 2 days trying to figure this out so any help is appreciated.

I was following this nice little video tutorial series and I wanted to try something basic before getting any further: get an html button to show a javascript alert using google apps script and their HTML Service component, but for the life of me, I can't understand why the alert is not triggered.

Here's my code

Index.html

    <!DOCTYPE html>
        <html>
          <head>
              <script>
                 document.getElementById("btnSearch")
                         .addEventListener("click",showAlert);                
              function showAlert() {
                alert("hello world");
              }
              </script>
          </head>
          <body>
            <div>
              <label>Enter code</label>
              <input type="text" id="txtStudentID"/>
              <button id="btnSearch">Search</button>
            </div>
          </body>
        </html>

and my code.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index');
}

I also try it like google shows it here: but I still don't get the alert to trigger after the button is pressed:

<input type="button" value="Search"
      onclick="google.script.run
          .withSuccessHandler(showAlert)
          .withUserObject(this)" />

it's like anything that starts with "document.getElementByID..." within the script tags will simply not work

What am I missing? is this something not longer supported with GAPS? is there a different/proper way to get this to work?

thank you in advance.

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

anything that starts with "document.getElementByID..." within the script tags will simply not work

Yes. Because at the time script tags are evaluated, there's no element with id btnSearch.

Solution(s):

Move the script to the bottom of DOM.

<div>
  <label>Enter code</label>
  <input type="text" id="txtStudentID" />
  <button id="btnSearch">Search</button>
</div>

<script>
  function showAlert() {
    alert('hello world');
  }
  document.getElementById('btnSearch').addEventListener('click', showAlert);
</script>

Alternatively, As the previous answer states, use the load trigger; so that the script is evaluated after the DOM is loaded.

<script>
  function showAlert() {
    alert('hello world');
  }
  function load1() {
    document.getElementById('btnSearch').addEventListener('click', showAlert);
  }
  window.addEventListener('load', load1);
</script>

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 2, 2019 at 6:12

TheMaster

51.6k7 gold badges76 silver badges102 bronze badges

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

1 Comment

Francisco Cortes Over a year ago

Thank you so much man.. I know it had to be something small that I was missing.

Cooper · Accepted Answer · 2019-06-02 05:04:49Z

0

Try putting addEvent into window.onload

answered Jun 2, 2019 at 5:04

Cooper

64.2k7 gold badges29 silver badges65 bronze badges

Collectives™ on Stack Overflow

button will not execute click function in google apps script html service

2 Answers 2

Solution(s):

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Solution(s):

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related