Javascript on Google Sites - javascript

I am a bit new to the coding. I tried to put javascript on my google site in an HTML box but it is not working. I am pasting my code here.
<!DOCTYPE html>
<html>
<body>
<p>Click the button to display an alert box:</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
alert("I am an alert box!");
}
</script>
</body>
</html>
It should validate with the alert box. The code is running fine when I am running it on the localhost but is not working when I am pasting it in the HTML box within a google site. my company is using Google gadget to make the HTML and javascript run over the google site. Is there any simpler way to do without google gadget?

You can program a div with a method to act like the alert method. Stylize and position it however you want, but here is an example of one I called msgBox that takes a message and a type (just changes the color for critical, warning, and info) and shows up like a banner at the top of the document:
<!DOCTYPE html>
<html>
<head>
<style>
.msgBox{position:absolute;width:50%;top:0px;left:-25%;margin-left:50%;padding:1%;color:black;display:none;font-family:"Calibri","Arial",sans-serif;vertical-align:middle;}
.info{background-color:rgba(120,170,250,0.95);}
.warn{background-color:rgba(240,230,120,0.95);}
.crit{background-color:rgba(250,120,120,0.95);}
.msgBoxMessage{width:98%;max-width:98%;height:100%;color:black;font-size:1.8vw;vertical-align:middle;}
.msgBoxClose{height:100%;color:black;font-weight:bold;font-size:3vw;cursor:pointer;transition:0.2s;vertical-align:middle;}
.msgBoxClose:hover{color:white;transition:0.2s;}
</style>
<script>
function msgBox(message, type) {
var msgBox = document.getElementById("msgBox");
var msgBoxMessage = document.getElementById("msgBoxMessage");
msgBoxMessage.innerHTML = message;
msgBox.style.display="block";
msgBox.className="msgBox " + type.toLowerCase();
}
</script>
</head>
<body>
<h2>This page shows how to drive messages without using javascript alert.</h2>
<div class="msgBox info" id="msgBox">
<table style="width:100%;">
<tr>
<td class="msgBoxMessage" id="msgBoxMessage"></td>
<td class="msgBoxClose" onclick="document.getElementById('msgBox').style.display='none';">×</td>
</tr>
</table>
</div>
<button onclick="msgBox('This is for your <u>information</u>.', 'info');">Info</button>
<button onclick="msgBox('This is just a <i>warning</i>.', 'warn');">Warn</button>
<button onclick="msgBox('This is a <b>critical</b> message!', 'crit');">Crit</button>
</body>
</html>

Perhaps you shouldn't be pasting the <html> and <body> tags in the widget box, as it is already part of a html document.
Simply try this instead:
<button onclick="alert('I am an alert box!');">Try it</button>

Related

Apps Script won't get any logs from HTML page

I am trying to run a function from Google Apps Script in a HTML page. Basically, I want to get a log message that says "Someone Clicked the Button" whenever the button is clicked. However, I click the button and still get nothing in my logs. I wonder what I'm doing wrong. Here's my code:
function doGet(){
return HtmlService.createHtmlOutputFromFile("page");
}
function userClicked(){
Logger.log("Someone Clicked the Button");
}
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>Hello</h1>
<button id="btn">Run It</button>
<script>
document.getElementById("btn").addEventListener("click",doStuff);
function doStuff(){
google.script.run.userClicked();
}
</script>
</body>
</html>
Any help will be appreciated!
If you are using the new editor you can create a new deployment and then copy the url and go to another window paste and run it and you should see your button.
Then if you project is not a Cloud Platform Project, goto Project Setting and uncheck this item Log uncaught exceptions to Cloud logs
Now go to Executions and then move to the tab with your web app and click it and move back to the executions page and in a short time you should see a userClicked entree and if you open it, in the logs in the bottom of the screen.
Hopefully this will work the same for you.
How about this?
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>Hello</h1>
<button id="btn" onclick="google.script.run.userClicked()">Run It</button>
</body>
</html>

window.print() in Apps Script custom modal dialog box

I am creating a custom modal dialog pop up box in Google Sheets via an Apps Script that is running an onEdit trigger. The idea is, the user clicks on a checkbox in some cell in a column. The trigger detects this edit, and calls a function that utilizes Apps Script UI and HtmlService class. This creates a simple modal dialog box that is built using some html. In the html, I have a button that calls window.print(). However, by calling it, nothing happens. I think it's because of the Same Origin Policy issue. The Html Service is likely using another domain name to launch the dialog box that's different than docs.google.com. So, window calls are likely problematic. Is there another way around this? How does one create customized printing for Google Apps? I've seen some variations of creating a pdf on the fly and printing those, but this seems really inefficient for the end user.
When the checkbox is clicked, the following function is called:
function openDialog() {
var html = HtmlService.createHtmlOutputFromFile('html') ;
SpreadsheetApp.getUi()
.showModalDialog(html, 'Print Receipt');
}
Here is the following html:
<!DOCTYPE html>
<html>
<head><base target="_top">
</head>
<body>
<img src="https://i.imgur.com/someimage.png" alt="Logo" width="100" height="100">
<h3>testing</h3>
<button onclick="print()">Print</button>
</body>
<script>
function print() {
window.print();
}
</script>
</html>');
You should consider renaming the print function to something else, say "printPage" else it may be invoking the native print API. Also, the extra parenthesis in the HTML maybe removed.
<!DOCTYPE html>
<html>
<head><base target="_top">
</head>
<body>
<img src="https://i.imgur.com/someimage.png" />
<h3>testing</h3>
<button onclick="printPage()">Print</button>
</body>
<script>
function printPage() {
window.print();
}
</script>
</html>

Using Chrome Developer Tab for realtime html and javascript testing

In Google chrome web browser
about:blank gives an empty page and F12 gives you access to Developer Tab.
Right-clicking a source in Elements gives Edit as Html Option in Developer Tab
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div>
<button id="myBtn">Button</button>
</div>
<div id="demo">
</div>
<script>
document.getElementById("myBtn").addEventListener("click", function () {
document.getElementById("demo").innerHTML = "Hello World";
});
</script>
</body>
</html>
Above is a JavaScript snippet which I copied in. But JavaScript code is not executing. Is this work flow of real time html editing not supported in chrome ?
Your script would ran, if it existed there when the page gets loaded. After the page has loaded, no script tags will just run when edited in.
You could wrap everything inside the script tags into a function and call that I think, however.
One other, but kind of a useless and technical trick that might let you run JavaScript, by editing in elements after the page has loaded, looks something like this:
If you add that in to the loaded page's HTML, the script inside that input-element's onfocus-attribute should run. This, however, is no proper way to do anything other than Cross-Site Scripting (XSS).
You can use a template literal, document.write() at console. At about:blank page press F12, at console enter
var html = `<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div>
<button id="myBtn">Button</button>
</div>
<div id="demo">
</div>
<script>
document.getElementById("myBtn").addEventListener("click", function () {
document.getElementById("demo").innerHTML = "Hello World";
});
</script>
</body>
</html>`;
document.write(html);
then click <button> element.
You can alternatively click Sources -> Snippets, type or paste the above javascript at center window, click right-pointing triangle at right panel to run javascript at Snippets. You can also right-click at Snippets panel to create a new snippet to run.

return domain name in javascript

I'm trying to use javascript to echo/return the domain name into a displayed document.
I found this code that works by using a button click
But I need it to run automatically when the page is loaded.
The idea is so I have an about page on a site with multiple domains.
So if someone loads foo.com the page says "About FOO.COM" and if someone loads BAR.COM it likewise says "About BAR.COM" on the fly.
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to return the domain name of the server that loaded this document.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var x = document.getElementById("demo");
x.innerHTML=document.domain;
}
</script>
</body>
</html>
Just call the function immediately instead of putting it in an event handler.
myFunction();
with jquery:
<div id="yourbutton>your Button</div>
<script>
$(document).ready(function(){
$("#yourbutton").html(document.domain);
});
</script>
without jquery:
search for window.onload
...yay my first post on stackoverflow ;

javascript beginner- unable to show message box on screen

I am simply trying to show a message box on screen.
This is the HTML for the button that invokes the message box---
<button onclick="myFunction()">Try it</button>
This is the relevant javascript function code--
function myFunction()
{
alert("Hello World!");
}
The javascript function is stored at js/fetchdetails.js (path relative to the HTML file).
I have included the JS file in the HTML file using the following code in the head section--
<script src="js/fetchdetails.js"></script>
What am I doing wrong here?
There's nothing wrong in the code you've posted; the error is somewhere else.
Either your fetchdetails.js is not being loaded, or some error in javascript not shown here causes your script to stop executing.
Use your browser's inspection tool to look for any error messages, and to verify that the file has loaded correctly (there's usually a "Net" tab for that).
Try this..
<!DOCTYPE html>
<html>
<head>
<title>Page Name</title>
<script type="text/javascript" src="js/fetchdetails.js"> </script>
</head>
<body>
<button onclick="myFunction();">Try it</button>
</body>
</html>
In your javascript file
function myFunction(){alert("Hello World!");}
This works perfect for me
If it doesnt work please provide more details or else try these buttons:
<button onclick="javascript:myFunction();">Try it</button>
<input type="button" onclick="myFunction();" value="Try me"/>
<input type="button" onclick="javascript:myFunction();" value="Try Me"/>
Hope this helps

Categories

Resources