Script in HTML Page can't call a function outside the html file or a function through library

Deo Depari

unread,

Feb 9, 2023, 12:05:48 AM2/9/23

to Google Apps Script Community

Hey Everyone I have a problem where my script in HTML page can't call a function outside the HTML file or a function through the library.

HTML code:

<!DOCTYPE html>

<html>

<head>

<?!= include('Stylesheet'); ?>

</head>

<body>

<h1>Welcome</h1>

<p>Please enjoy this helpful script.</p>

<?!= include('JavaScript'); ?>

<div>

<label for="sheetLink">Google Sheets Link:</label>

<button id="myButton" onclick="handleButtonClick()">Click me</button>

</div>

function handleButtonClick() {

var userInput = document.getElementById("myInput").value;

console.log(userInput);

alert(userInput)

let uwow = LibIdentifier.receiveLink();

Logger.log(uwow);

console.log(uwow);

alert(uwow)

userClicked();

}

</script>

</body>

</html>

Error Result on clicking the button
call a function error.png

any help is greatly appreciated. Thank you

Brett Grear

unread,

Feb 9, 2023, 5:39:38 AM2/9/23

to Google Apps Script Community

Is the receiveLink() function server side rather than client-side?

You would need to do google.script.run.withSuccessHandler(handledClick).receiveLink()

You would then need a function called receiveLink() in your .gs file that handled the logic from your Library and then returned the results.

Finally, you would need a success handler (in my example it is called handleClick) that received the return value from the .gs function and used it appropriately as google.script.run calls are asynchronous.

Atleast, this is what I think your problem is based on the example given.

Documentation: https://developers.google.com/apps-script/guides/html/reference/run

Deo Depari

unread,

Feb 9, 2023, 10:43:09 PM2/9/23

to Google Apps Script Community

thank you for the feedback, I have tried " withSuccessHandler(handledClick).receiveLink()"

here is the html code
----- ----- ----- ----- ----- ----- -----

<!DOCTYPE html>

<html>

<head>

<?!= include('Stylesheet'); ?>

function onSuccess(numUnread) {

console.log("onSuccess called")

var div = document.getElementById('output');

let uwow = userClicked();

console.log("onSuccess =" + uwow)

}

function onFailure(error) {

var div = document.getElementById('output');

div.innerHTML = "ERROR: " + error.message;

}

let uwow = google.script.run.withSuccessHandler(onSuccess).userClicked();

console.log("the result = " + uwow)

function handleButtonClick() {

var userInput = document.getElementById("myInput").value;

alert(userInput)

var uwow = "kasbdnjaks"

console.log(uwow)

}

</script>

</head>

<body>

<h1>Welcome</h1>

<p>Please enjoy this helpful script.</p>

<?!= include('JavaScript'); ?>

<div>

<label for="sheetLink">Google Sheets Link:</label>

<button id="myButton" onclick="handleButtonClick()">Click me</button>

</div>

</body>

</html>

-----------------------

But I still encountered "Uncaught ReferenceError: userClicked is not defined" even though i already create userClicked function in another file.

If I'm correct, all the gs file is server sided while the html is client sided right?

Brett Grear

unread,

Feb 10, 2023, 3:10:12 AM2/10/23

to Google Apps Script Community

It's not clear from your code snippet whether your userClicked() function or your LibIdentifier.receiveLink() function require any variables to run but I assume that they do.

The mistake you are making is how client-side and server-side work together. Server side has no access to variables that are client side unless they are entered as parameters in the google.scrip.run call. Similarly client-side has no access to server-side variables unless received in the callback function. The code snippet below is the best I can do without knowing what your server-side code looks like.

<script>
function handleButtonClick() { //This will run when you click the button

var userInput = document.getElementById("myInput").value;

alert(userInput)

google.script.run.withSuccessHander(onSuccess).LibIdentifier.receiveLink() //Make sure to put any variables that the receiveLink() function needs to receive server side inside the parentheses and then receive them as variables inside the library function

}

function onSuccess(uwow) { //This function will run if the LibIdentifier.receiveLink() completes successfully. The return value from that function will be what the variable within the onSuccess function is. Return an Object if you need multiple variables

var div = document.getElementById('output');

console.log("onSuccess =" + uwow)

}

</script>

Again, I don't know the what LibIdentifier.receiveLink() and userClicked() do as they appear to be server functions.

In your code you try to set a variable to the return value of a server side function but this is not how Apps Script works. google.script.run should usually be the last line of code in your function and then the script continues in the successHandler

I get that async is confusing when starting out. It took me a while to get the hang of it. If you could actually share your server side scripts and an idea of what your project is actually supposed to achieve I might be able to help more.

Deo Depari

unread,

Feb 10, 2023, 4:07:32 AM2/10/23

to Google Apps Script Community

Hi, thank you so much for the script code, after I changed:
" google.script.run.withSuccessHander(onSuccess).LibIdentifier.receiveLink() " | where this code supposedly uses a function inside the library and gets the returned value

into

" let uwow = google.script.run.withSuccessHandler(onSuccess).userClicked() " | even though this code doesn't call a function inside the library, it still manages to successfuly get the returned value from function userClicked(), where this function is outside the html file but still in the same project.

so to sum it up, on "using google.script.run" you need to add .withSuccessHandler(onSuccess).yourFunction().

here is the photo of the code : html code.png

thank you so much, you are a lifesaver

Brett Grear

unread,

Feb 10, 2023, 6:47:59 AM2/10/23

to Google Apps Script Community

Fantastic! Glad it worked.

Welcome to async coding!

Once you get the hang of it it's really handy as you can speed your code up by not waiting for slow functions to finish.

The general gist is:

your functions runs

IF if runs successfully it runs the successhandler

IF it fails, it runs the failurehandler

As an aside, you don't actually need the let uwolw = part of the google.script.run call because it isn't stored it as a variable in that function as that function has ended long before the server side script is ever executed.

The uwol parameter in your onSuccess is whatever the return value from userClicked() is.

Have a nice day

Reply all

Reply to author

Forward