Google script: doGet function not found only when using web app? - javascript
I'm trying to make a google apps script link up with an HTML document and it is INFURIATING.
My code works fine when I test it using the 'test web app for your latest code' but when I deploy it as a web app, all I get is an error message that says "script function does not found"
//this is my javascript
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('Index.html');
}
<!-- aaand this is a crude effigy of my index.html fie for demonstration purposes -->
<!DOCTYPEhtml>
<html>
<head>
<h1>CRUDE HTML FOR DEMONSTRATION PURPOSES</h1> <p>Some ugly, crude HTML for demonstration purposes</p>
<body> <button> A pointless button, just because.</button></body>
</head>
</html>
Ok I'll admit the above "accepted" answer is correct (Edit: that is no longer the accepted answer), but........
If you are going to want to incorporate your own CSS file into your html (why would you not?) then your going to need to format it like this:
your original .gs file (.gs) with doGet()
function doGet() {
return HtmlService.createTemplateFromFile('index')
.evaluate();
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
your original html file (.html) (I named all of mine "index")
<!DOCTYPE html>
<html>
<head>
<title>Elliots Site</title>
<base target="_top">
<?!= include('css'); ?>
<script>
</script>
</head>
<body>
<div class="to2">
</div>
<div class="top">
<div class="title">
<h1 class="tital">Elliot's site</h1>
</div>
<img class="pic1" src="https://docs.google.com/drawings/d/e/2PACX-1vSH6kVTlN1hP891dSK44zmRK6gi7b3iGzt7CnO4P37a8zABg-NADND5q2_hgezsIQEFYqgcz_JVUWk7/pub?w=327&h=187">
</div>
<div class= space>
<ul class="nav">
<base href=" https://script.google.com/a/pelhamcityschools.org/macros/s/AKfycbwk_bEKfLI4sxCfeFoSWbRV7H4NhYWxr5oTPSGZFs9j/dev" target="_blank">
<li>google</li>
</ul>
</div>
<div class= "part2">
<img class= "pic" src="https://docs.google.com/drawings/d/e/2PACX-1vTd3j0_lBWS8u0HHFB7Eg0XzOkVdrdZco57nkewuzaTcDzpPkpoDevTzo0FFJEvgctAPhSxUtxvwgCj/pub?w=510&h=360"style="float:left">
<h2 class= "text">Hi I'm Elliot, and I'm a cool guy. I made this website on my own, and its good. I am happy about it and am excited to show it to dad.</h2>
</div>
<div class= "part3">
<div class="blank">
<h4>©2020 Elliot Massey</h4>
</div>
<div class="space2">
</div>
</div>
<?!= include('javascript'); ?>
</body>
</html>
Your CSS file (.html) (Please notice the scriptlet that calls on this{The scriptlet is the <?!= include('css'); ?>})
<style>
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
html, body {
margin: 0;
padding: 0;
}
body {
font-family: 'Roboto', sans-serif;
font-weight: 100;
}
title {
display: none;
}
.to2 {
background-color:#00FFFF;
background-size: cover;
height: 130px;
background-attachment: fixed;
}
.top .title .tital {
font-family: 'Piazzolla', serif;
text.getTextStyle(.setLinkUrl("https://fonts.googleapis.com/css2?family=Piazzolla:ital,wght#1,500&display=swap"));
}
.top .title {
background-position: center, center;
background-color:yellow;
background-size: auto;
height: fillparent;
text-align: center;
background-attachment: scroll;
}
.top .pic1 {
display: block;
margin-left: auto;
margin-right: auto;
background-attachment: fixed;
vertical-align: middle;
}
.top {
background-color:#00FFFF;
background-size: cover;
height: 500px;
background-attachment: fixed;
}
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
html, body {
margin: 0;
padding: 0;
}
body {
font-family: 'Roboto', sans-serif;
font-weight: 100;
}
.space .nav li {
background-color: yellow;
background-size: cover;
height: 100px;
background-attachment: fixed;
display: inline-block;
padding: 20px;
}
.space .nav {
background-color: yellow;
list-style-type: none;
text-align: center;
padding: 0;
margin: 0;
}
.space {
background-color: white;
background-size: cover;
height: 500px;
background-attachment: fixed;
}
.part2 .pic .text {
font-family: 'Roboto', sans-serif;
font-weight: 100;
background-attachment: fixed;
float: right;
vertical-align: top;
}
.part2 .pic {
float: left;
background-attachment: fixed;
vertical-align: top;
}
.part2 {
background-color:white;
background-size: cover;
height: 600px;
background-attachment: fixed;
align-items : top;
}
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
html, body {
margin: 0;
padding: 0;
}
body {
font-family: 'Roboto', sans-serif;
font-weight: 100;
}
.part3 .blank h4 {
vertical-align: middle;
font-family: 'Montserrat', sans-serif;
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#300&display=swap');
background-color: black;
color: white;
text-align: center;
}
.part3 .blank {
align-items : center;
background-color:black;
background-size: cover;
height: 100px;
text-align: center;
}
.part3 .space2 {
background-color:black;
background-size: auto;
height: 50px;
}
</style>
and last but not least a java script function (.html)
<!DOCTYPE html>
<script>
window.addEventListener('load', function() {
console.log('Page is loaded');
});
</script>
One last thing, if your screeching about including the CSS () in the original html, don't. One, this a lot less jumbled so you can A. Impress your boss or whoever by making your code appear shorter, B. You can read it easier. Two you can make multiple and quickly switch out the name in the scriptlet. Three, you can debug them separate.
Also feel free to copy and paste this into google app scripts to see the code with their highlights and the end result (I know it looks like crap I only spent ten minutes on it)
This is what you want to paste into scripts if you want your own code (think of it as a layout) in the previous order
function doGet() {
return HtmlService.createTemplateFromFile(YOUR_HTML_HERE)
.evaluate();
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include('css'); ?>
<script>
</script>
</head>
<body>
<?!= include('javascript'); ?>
</body>
</html>
*the below CSS formatting is not necessary,just recommended
<style>
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
html, body {
margin: 0;
padding: 0;
}
body {
font-family: 'Roboto', sans-serif;
font-weight: 100;
}
<!DOCTYPE html>
<script>
window.addEventListener('load', function() {
console.log('Page is loaded');
});
</script>
That's about it... uhhhh...Good Bye
I used this code
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>CRUDE HTML FOR DEMONSTRATION PURPOSES</h1>
<p>Some ugly, crude HTML for demonstration purposes</p>
<button> A pointless button, just because.</button>
</body>
</html>
function doGet() {
return HtmlService.createHtmlOutputFromFile('ah3');
}
function showDialoge() {
SpreadsheetApp.getUi().showModelessDialog(HtmlService.createHtmlOutputFromFile('ah3'), 'Test');
}
Make sure you pick the new selection when you deploy as webapp.
Related
W3C HTML5 ERROR Start tag head seen but an element of the same type was already open
Start tag head seen but an element of the same type was already open.
also I got some other errors:
" Saw <?. Probable cause: Attempt to use an XML processing instruction in HTML. (XML processing instructions are not supported in HTML.) "
and
" No p element in scope but a p end tag seen. "
I have no clue how to fix them.
<!DOCTYPE html>
<html lang="pl">
<style>
html, body { margin: 0; padding: 0; color: black; background-color: grey;}
#strona { position: absolute; color: white}
#rects { position: relative; width: 300px; height: 125px; border: 1px solid #FF0000; color: yellow; margin: 5px; padding: 2px;}
</style>
<head>
<meta charset="UTF-8"/>
<title> site</title>
</head>
<body>
<div> <script>
function clickbutton1(){
document.getElementById("opis").innerHTML = Date();
}
</script>
</div>
<div id="strona">
<h1>test</h1>
<?php
echo "<p>data replacement</p>";
echo "<div id='rects'>
<!-- starting of the function -->
<p id='opis'> internal description </p>
<script>
document.getElementById('rects').onclick = clickbutton1;
</script>
</div>";
?>
</div>
</body>
</html>```
There were some added characters under div#strona that were interfering with how the code was being run.
In order to make the Javascript functional, add the clickbutton1() onclick function directly to the HTML element.
Below is the reformatted code with HTML/CSS/Javascript in their own respective files:
function clickbutton1() {
return document.getElementById("opis").innerHTML = Date();
}
html,
body {
margin: 0;
padding: 0;
color: black;
background-color: grey;
}
#strona {
position: absolute;
color: white
}
#rects {
position: relative;
width: 300px;
height: 125px;
border: 1px solid #FF0000;
color: yellow;
margin: 5px;
padding: 2px;
}
<head>
<meta charset="UTF-8" />
<title> site</title>
</head>
<body>
<div id="strona">
<h1>test</h1>
<div onclick="clickbutton1()" id='rects'>
<p id='opis'></p>
</div>
</div>
</body>
#weemizo Yes! I added the CSS styles to a style tag and the JS into a script element. They are now both placed in the head tag.
<html>
<head>
<meta charset="UTF-8" />
<title>Site</title>
<style>
html,
body {
margin: 0;
padding: 0;
color: black;
background-color: grey;
}
#strona {
position: absolute;
color: white
}
#rects {
position: relative;
width: 300px;
height: 125px;
border: 1px solid #FF0000;
color: yellow;
margin: 5px;
padding: 2px;
}
</style>
<script>
function clickbutton1() {
return document.getElementById("opis").innerHTML = Date();
}
</script>
</head>
<body>
<div id="strona">
<h1>test</h1>
<div onclick="clickbutton1()" id='rects'>
<p id='opis'></p>
</div>
</div>
</body>
</html>
Artyom.js disables itself immedeately
So I am having a couple of issues when using the voice library Artyom.js.
I have tried adding my own commands, and in theory, that should work. But the major issue is that the voice recognition stops immediately after enabling it. The following are the javascript, css and html files:
var five = require("johnny-five");
var keypress = require("keypress");
const artyom = new Artyom();
function startArtyom() {
artyom.initialize({
lang:"en-GB",
continous:true,
debug:true,
listen:true,
speed:1,
mode:"normal"
}).then(function(){
console.log("ready!");
})
}
var commandHello = {
indexes:["hello","good morning","hey"], // These spoken words will trigger the execution of the command
action:function(){ // Action to be executed when a index match with spoken word
artyom.say("Hey buddy ! How are you today?");
}
};
artyom.addCommands([commandHello]);
/*keypress(process.stdin);*/
/*var board = new five.Board();*/
body {
font-family: ebrima;
}
#body{
transition: all 3s ease-in-out;
}
#speech-cont {
background-color: gray;
height: 500px;
width: 90%;
margin-left: auto;
margin-right: auto;
border-radius: 0.5vh;
padding: 10px;
}
#speech-cont h3 {
text-align: center;
color: white;
font-family: ebrima;
font-weight: lighter;
}
#speech-cont #box {
border-style: solid;
border-color: black;
border-radius: 0.5vh;
background-color: white;
height: 70%;
width: 90%;
margin-left: auto;
margin-right: auto;
border-width: 1px;
}
#recognizeButton {
height: auto;
line-height: 30px;
width: 200px;
margin-left: 50%;
transform: translateX(-50%);
margin-top: 20px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body id="body">
<div id="speech-cont">
<h3>Speech to text recognition</h3>
<div id="box">
<h4 id="result">
</h4>
</div>
<button id="recognizeButton" onclick="startArtyom();">Recognize!</button>
</div>
<script src="artyom.win.min.js"></script>
<script src="main.js"></script>
</body>
</html>
As you see, I even straight up copy & pasted the example from Atryom.js' site to see if I had written a typo. Which turned out to not be the case.
I have absolutely no idea as to why artyom.js immediately stops voice recognition.
Thanks in advance :)
check if client click on image which is defined only in CSS file like background of class
Is it possible to check via javascript if client click on background image which is defined in css file to some div class ? ..
.volume {
width: 40%;
margin: auto;
padding-left: 40px;
background: url(../img/speaker.png) left center no-repeat;
height: 30px;
line-height: 30px;
margin-top: 2em;
}
I really don t want to change HTML file because I am not an owner..
here is the HTML code
<div class="volume">
<div class="progress-bar">
<div class="progress">
<span></span>
</div>
</div>
</div>
You can accomplish this simply by placing a transparent element over the speaker icon, and assigning a click event to it.
See this jsfiddle.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style type="text/css">
.volume {
width: 40%;
margin: auto;
padding-left: 40px;
/*background: url(../img/speaker.png) left center no-repeat;*/
background: url(http://findicons.com/files/icons/1672/mono/32/speaker.png) left center no-repeat;
height: 30px;
line-height: 30px;
margin-top: 2em;
}
#overlay {
z-index: 1000;
background-color: transparent;
height: 32px;
width: 32px;
position: relative;
right:40px;
bottom:2px;
}
</style>
</head>
<body>
<div class="volume">
<div class="progress-bar">
<div class="progress">
<span></span>
</div>
</div>
</div>
<script type="text/javascript">
var $overlay = $('<div id="overlay""></div>').click(function() { overlay_click(); } );
$('div.volume').prepend($overlay);
function overlay_click() {
alert('icon was clicked');
}
</script>
</body>
</html>
I'm not sure what / how this looks on your end, but if you wish to check if a user clicked on the .volume div (and not the .progress-bar or .progress), you can simply check the target of the click event:
var volume = document.querySelector('.volume');
volume.addEventListener('click', function(e) {
// check if it was the .volume div
if (e.target.className === 'volume') {
// do something
}
});
https://jsfiddle.net/j64fpb3m/1/
Trying to change colour of a button to show which images is displayed with javascript
I'm trying to change colour of a button to show which images is displayed with JavaScript. Something similar to :Active in CSS. I've been looking for hours, I've managed to change just about every other element on the page except for the one I actually want to change, all I need is to change the background color of the clicked button and then revert back to original color a different button is clicked. Any help would be much appreciated.
<! doctype html>
<html>
<head>
<title>Task 2</title>
<!--styles-->
<style>
body {
margin: 0;
background-color: mediumpurple;
}
header {
margin: auto;
width: 90%;
background-color: orangered;
height: 50px;
text-align: center;
}
#content {
width: 80%;
background-color: green;
margin: auto;
}
nav {
float: left;
background-color: greenyellow;
width: 30%;
height: 750px;
text-align: center;
}
#pictureFrame {
float: left;
width: 70%;
height: 750px;
background-color: deeppink;
}
footer {
margin: auto;
width: 90%;
background-color: orangered;
height: 50px;
text-align: center;
clear: both;
}
.button {
margin-top: 100px;
background-color: white;
border-radius: 20px;
width: 70%;
height: 75px;
}
#img {
margin-top: 19%;
margin-left: 35%;
width: 300px;
height: 300px;
}
</style>
<script type="text/javascript">
function pic1() {
document.getElementById("img").src = "images/starbucks.png";
}
function pic2() {
document.getElementById("img").src = "images/muffin.png";
}
function pic3() {
document.getElementById("img").src = "images/costa.png";
}
</script>
</head>
<body>
<header>
<h1>Coffee</h1>
</header>
<section id="content">
<div id="pictureFrame">
<img src="" id="img" />
</div>
<nav>
<button id="button1" class="button" onclick="pic1()">Starbucks</button>
<br/>
<br/>
<button id="button2" class="button" onclick="pic2()">Muffin Break</button>
<br/>
<br/>
<button id="button3" class="button" onclick="pic3()">Costa</button>
</nav>
</section>
<footer>
<h1>This is a footer</h1>
</footer>
</body>
</html>
By clicking on each button simply change the background of that button with style.background='color'. Also reset the color of other two buttons. Simply create a function to reset the background color.
<script type="text/javascript">
function reset(){
document.getElementById("button1").style.background='white';
document.getElementById("button2").style.background='white';
document.getElementById("button3").style.background='white';
}
function pic1() {
document.getElementById("img").src = "images/starbucks.png";
reset();
document.getElementById("button1").style.background='red';
}
function pic2() {
document.getElementById("img").src = "images/muffin.png";
reset();
document.getElementById("button2").style.background='red';
}
function pic3() {
document.getElementById("img").src = "images/costa.png";
reset();
document.getElementById("button3").style.background='red';
}
</script>
Fiddle : https://jsfiddle.net/tintucraju/6dkt0bs2/
Using chrome.tabs.executeScript to check a box, not working
I am not able to get the checkbox in this page to be checked.
<html>
<body>
<form name="f">
<input type="checkbox" name="vehicle" value="Bike" /> 1<br /></li>
</form>
</body>
</html>
My popup.js is below:
function click(e) {
chrome.tabs.executeScript(null,
{code:"document.body.f.vehicle.checked='true'"});
window.close();
}
document.addEventListener('DOMContentLoaded', function () {
var divs = document.querySelectorAll('div');
for (var i = 0; i < divs.length; i++) {
divs[i].addEventListener('click', click);
}
});
In the console log I keep getting the error: Uncaught TypeError: Cannot read property 'vehicle' of undefined.
My popup.html is below:
<!doctype html>
<html>
<head>
<title>Set Page Color Popup</title>
<style>
body {
overflow: hidden;
margin: 0px;
padding: 0px;
background: white;
}
div:first-child {
margin-top: 0px;
}
div {
cursor: pointer;
text-align: center;
padding: 1px 3px;
font-family: sans-serif;
font-size: 0.8em;
width: 100px;
margin-top: 1px;
background: #cccccc;
}
div:hover {
background: #aaaaaa;
}
</style>
<script src="popup.js"></script>
</head>
<body>
<div id="1">1</div>
</body>
</html>
Any help would be appreciated.
It should be like this, document.f.vehicle.checked='true'; http://jsfiddle.net/PnXsE/