Question 218774 in Html Question posted in
Some basic documentation can be found here.

Html – How to move a JavaScript script into a seperate file?

This sample data entry web app works as expected and appends new data to the spreadsheet using the id. With minimal changes, how can the script from the HTML file be placed into a different file while keeping the same functionality?

The code.js file:

const id = "#####";


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

function AddRecord(firstname, lastname) {
  var sheet = SpreadsheetApp.openById(id).getSheetByName("alpha");
  sheet.appendRow([firstname, lastname, new Date()]);
}

existing WebApp.html which works:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
    function AddRow()
    {
      var firstname = document.getElementById("firstname").value;
      var lastname = document.getElementById("lastname").value;
      google.script.run.AddRecord(firstname, lastname);
      document.getElementById("firstname").value = '';
      document.getElementById("lastname").value = '';
    }
    </script>
  </head>
  <body>
    First Name:<input type="text" id="firstname" />
    Second Name:<input type="text" id="lastname" />
    <input type="button" value="Add" onclick="AddRow()" />
  </body>
</html>

Pulling out just the script and putting in a different file:

<script>
  function AddRow()
    {
      var firstname = document.getElementById("firstname").value;
      var lastname = document.getElementById("lastname").value;
      google.script.run.AddRecord(firstname, lastname);
      document.getElementById("firstname").value = '';
      document.getElementById("lastname").value = '';
    }
</script>

How can the above script be inserted, appended, or included back into the WebApps.html file?

Undoubtedly there’s a term to succinctly describe this process.

Tags:

2

Answers


  1. 0

    Put this:

    <script>
  function AddRow()
    {
      var firstname = document.getElementById("firstname").value;
      var lastname = document.getElementById("lastname").value;
      google.script.run.AddRecord(firstname, lastname);
      document.getElementById("firstname").value = '';
      document.getElementById("lastname").value = '';
    }
</script>

    into somename.html

    Then change WebApp.html to:

    <!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= include('somename') ?>
  </head>
  <body>
    First Name:<input type="text" id="firstname" />
    Second Name:<input type="text" id="lastname" />
    <input type="button" value="Add" onclick="AddRow()" />
  </body>
</html>

    Add this function to one of your first gs script files

    function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
    Login or Signup to reply.
  2. 0

    You can just move the javascript code to another file (a .js file) without the script tags. You only need to add a source property to the script tag in the html file.

    The seperate file will be: (without the <script> tags)
    (Call it another_file.js for now)

    function AddRow()
    {
      var firstname = document.getElementById("firstname").value;
      var lastname = document.getElementById("lastname").value;
      google.script.run.AddRecord(firstname, lastname);
      document.getElementById("firstname").value = '';
      document.getElementById("lastname").value = '';
    }

    And the html file will become:

    <!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script src="another_file.js">
    </script>
  </head>
  <body>
    First Name:<input type="text" id="firstname" />
    Second Name:<input type="text" id="lastname" />
    <input type="button" value="Add" onclick="AddRow()" />
  </body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search