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.
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>
Try putting addEvent into window.onload
Related
I have written a Google Sheets add-on that uses a modal dialog as the interface. I was having trouble getting the success handler to run, so I created a skeleton interface for testing, and have the same issue.
Whenever the server-side function returns, the function specified in the success handler should run. Instead, it throws an error "Untaught TypeError: a is not a function". I am able to manually trigger the function specified for the handler via a button (added for demonstration purposes only. Code below:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
function success(){
document.getElementById("waitMessage").innerHTML = "TEST";
}
function testFunc(){
google.script.run.withSuccessHandler("success").serverSideFunc();
}
</script>
</head>
<body>
<p>
Click the button to close the window
</p>
<form>
//Doesn't work
<input type="button" name="test" value="Server-side test" onclick="testFunc()">
//Works
<input type="button" name="test-client" value="Client-side test" onclick="success()">
</form>
<div id="waitMessage">
<p></p>
</div>
</body>
</html>
.gs script file below:
function serverSideFunc(){
Logger.log("");
}
As you can see, the script file is just a dummy function designed to trigger the success handler.
What's going on here? Have I missed something simple?
You are not having an error returned. You do not put quotes around the function name to run:
function testFunc(){
google.script.run.withSuccessHandler(success).serverSideFunc();
}
I know there are a lot of questions like this, but none of them seemed to solve my problem. I have this piece of code that won't run because it says Uncaught ReferenceError: run is not defined. I have tried to move the function into the body of the HTML, but to no avail. My code:
<!DOCTYPE html>
<html>
<textarea name="Text1" cols="100"rows="20" id="textbox">
</textarea>
<button onclick="run()">Export to C++</button>
<script type="text/javascript">
function run() {
var code=new Array();
var input = document.getElementById("textbox").value;
//convert things that are not subroutines here
code.push(input);
code.push("}");
...
for (var i=0;i<code.length;i++)
{
document.write(code[i]+"<br>");
}
}
</script>
</html>
The ... is irrelevant code.
Why isn't this working? Any ideas on how to fix it?
Thanks
Seems it working fine for me, but as I can see the only reason for the problem is the following.
Your page is loading piece by piece from up to down, so all the scripts are going to be included and executed one by one, all the elements are going to be shown one by one as well.
That's not this case in fact, because you are using "on click" event and there are no init actions, so it should be working, but you can try to move your <script></script> at the top (before you assign event).
<!DOCTYPE html>
<html>
<textarea name="Text1" cols="100"rows="20" id="textbox">
</textarea>
<script type="text/javascript">
you script here
</script>
<button onclick="run()">Export to C++</button>
</html>
You may also replace the whole code inside of
<script></script>
by something like alert("Hello"); to check if it's working. Possible you have the issue with internal code.
HTML
<div id="test"></div>
<input type="button" value="Go" onclick="test()" />
JavaScript
function test() {
alert("Test!");
}
Fiddle
http://jsfiddle.net/MVBrS/11/
Please look at this one, it is about jsfiddle code frames separation:
Inline event handler not working in JSFiddle
Of course, if you were running the same code embedded on plain HTML it works normally, having the alerted popup appearing.
<!DOCTYPE html>
<html>
<head>
<script>
function test() {
alert("Test!");
}
</script>
</head>
<body>
<div id="test"></div>
<input type="button" value="Go" onclick="test()" />
</body>
</html>
when you do
onclick="test()"
as an attribute of the input element, you are setting the result of the call test() (in your case 'null') as the click event handler
you probably want to do this
onclick="test"
instead, which will set the actual 'test' function as the handler,
or even better, follow the following guidelines: unbtrusive javascript or unobtrusive JS (2),.. you get the point ;)
I know this question has been asked many times and I have checked all the solutions and researched everything. However, this is simply not working for me.
I don't know what I am doing wrong. Can someone please help me out?
I am loading a local html file in my WebView and then calling the JavaScript function:
wv.loadUrl("file:///android_asset/sample.html");
wv.getSettings().setJavaScriptEnabled(true);
JavascriptInterface javasriptInterface = new JavascriptInterface(MyActivity.this);
wv.addJavascriptInterface(javasriptInterface, "MyInterface");
wv.loadUrl("javascript:loadpath()");
The HTML file is:
<html>
<head>
</head>
<body>
<script type="text/javascript">
function callDoSomething() {
// Do something
}
function loadpath() {
// Is not called no matter whatever operation I do here. Just printing a string, setting variable, android callback anything.
document.write("Hi");
document.getElementById('img').src = "path.png";
}
</script>
<form name="myForm" action="FORM">
<img src="" alt="Autofill" /><br>
<input type="button" value="Submit" onClick="callDoSomething()" />
</form>
</body>
</html>
loadUrl() is asynchronous. You are calling your second loadUrl() way too soon. You need to wait until your page is loaded, perhaps by using a WebViewClient and watching for onPageFinished().
I'm a beginner trying my first program to add external jscript file in scr attribute of script tag, followed all steps as I searched but it's not working the way it should. Can someone please help me with this?
I have one aspx form, and one button onclick calling internal javascript function.
I also have one button onclick calling external .js file function.
This is my aspx code
<head runat="server">
<script type="text/javascript" language="javascript" src="ExternalJScript.js">
function Myfunction()
{
document.getElementById("htmlbutton").innerHTML = "This is Button from Javascript function";
alert("Hi Function Called from Javascript");
}
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<button type="button" id="htmlbutton" onclick="Myfunction()">This is html button</button><br />
<button type="button" id="Button1" onclick="ExternalJSFileFunction()" value="Call File">HI</button>
</div>
</form>
And this is my .js code
ExternalJSFileFunction()
{
alert("I m from external file");
}
There should not be code in between the script tags of an external script. Try changing it to:
<head runat="server">
<script type="text/javascript" language="javascript" src="ExternalJScript.js"></script>
<script type="text/javascript">
function Myfunction()
{
document.getElementById("htmlbutton").innerHTML = "This is Button from Javascript function";
alert("Hi Function Called from Javascript");
}
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<button type="button" id="htmlbutton" onclick="Myfunction()">This is html button</button><br />
<button type="button" id="Button1" onclick="ExternalJSFileFunction()" value="Call File">HI</button>
</div>
</form>
Also, the Language attribute is deprecated and is not needed
Edit
It's because the function you are trying to call isn't actually a function because the function keyword is not used. Change the external file so that it is:
function ExternalJSFileFunction()
{
alert("I m from external file");
}
Then it will work
Additionally, there are some other tips as well:
If you're using the HTML5 doctype, you can also get rid of the type attribute on <script> elements too
Also have your opening curly braces on the same line as the function or conditional, so do:
function ExternalJSFileFunction() {
but not:
function ExternalJSFileFunction()
{
You should almost always add your scripts to the end of the page, just before the closing </body> tag for performance
Using the onclick attribute is also not the recommended way of attaching event handlers, you should use the proper addEventListener() method instead. If you need to support <= IE8 you'll need to use IE's older event API. Using a JS library. like jQuery, can really help out with this kind of stuff.
The function in your external JavaScript file is not defined properly.
It should look like this (I added the function keyword).
function ExternalJSFileFunction()
{
alert("I m from external file");
}
You also need to make the changes that danwellman suggested in his answer.