This question already has an answer here:
Why there's error in onclick when i have "module" in script tag?
(1 answer)
Closed 7 months ago.
<html>
<head>
<script type="module" src="topo_space.js"></script>
</head>
<body onload="main()">
</body>
</html>
topo_space.js:
export function main(){
const innerHTML = `<svg id="main_svg" width="959" height="704"></svg>`;
console.log(innerHTML);
document.body.innerHtml = innerHTML;
}
Getting error:
topo_space.html:6 Uncaught ReferenceError: main is not defined at onload
I want to stick to using module, because the js can itself further import a json as module, which I find extremely cool.
Checkout this thread to read more information about this problem:
How to use code from script with type=module
The answer is:
window.main = function main() {
const innerHTML = `<svg id="main_svg" width="959" height="704"></svg>`;
console.log(innerHTML);
document.body.innerHtml = innerHTML;
};
<html>
<head>
<script type="module" src="topo_space.js"></script>
</head>
<body onload="main()"></body>
</html>
Related
This question already has answers here:
How to view the logging of Google Web App when other users are executing it?
(2 answers)
Closed 1 year ago.
I am trying to replicate a simple Web app tutorial video, but can't get google.script.run.function to create a log in my code.gs. Here is my code:
Code.gs
function doGet(){
return HtmlService.createHtmlOutputFromFile("clock");
}
function userClicked(){
Logger.log("Log clicked");
console.log("Console click");
}
clock.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>test</h1>
<div id="replace">___</div>
<button id="submit">Submit</button>
<script>
document.getElementById("submit").addEventListener("click",doSubmit);
function doSubmit(){
google.script.run.userClicked();
document.getElementById("replace").innerHTML = "clicked";
}
</script>
</body>
</html>
When I run userClicked within the editor, the execution logs show up fine. Also, when the button is clicked in the webapp, the "clicked" text shows up just fine. Also, both doGet and userClicked show up in my Executions. The problem is that the logs do not show up in my execution logs when run from the webapp. I have a found a couple threads similar to this, but it never seems to get resolved.
UPDATE: I also tried adding withSuccessHandler and the results are the same - the functions both run fine in the Executions, but no log shows up in the Executions Log (also true of "Logs" if I test in the legacy version). The new html is this:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>test</h1>
<div id="replace">___</div>
<button id="submit">Submit</button>
<script>
document.getElementById("submit").addEventListener("click",doSubmit);
function onSuccess(){
document.getElementById("replace").innerHTML = "success";
}
function doSubmit(){
google.script.run.withSuccessHandler(onSuccess).userClicked();
}
</script>
</body>
</html>
What works then is if you create a function and call that function with your server function, so:
function logHi(){
console.log("hi")
}
// And then use it
function userClicked(){
logHi()
}
I am trying to learn JQuery running sample codes dealing with SetInterval or Settimeout I find on the Internet, but they won't run or work. For instance, I have the following simple code, but it won't run or even give me error message.
<!DOCTYPE html>
<html>
<head>
<title>testing</title>
<script type="text/javascript">
$(document).ready(function(){
setInterval(function() {
var number = 1 + Math.floor(Math.random() * 333);
$('#here').load(number);
},
1000);
});
</script>
</head>
<body>
<div id="here">dynamic content ?</div>
</body>
</html>
You first missed to add jquery library and second you should use .text() function rather than .load() function.
.load() function should use for ajax method.
One of the essential rules that should keep in mind that always put javascript code at the end of the page and before the end of the body tag
$(document).ready(function() {
setInterval(function() {
var number = 1 + Math.floor(Math.random() * 333);
$('#here').text(number);
}, 1000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>testing</title>
</head>
<body>
<div id="here">dynamic content ?</div>
</body>
</html>
This question already has an answer here:
Nested element (web component) can't get its template
(1 answer)
Closed 3 years ago.
I was trying to understand how web components work so I tried to write a small app that I served on a webserver (tested on Chrome which support rel="import"):
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="import" href="my-app.html" />
</head>
<body>
<my-app />
</body>
</html>
my-app.html:
<template id="template">
<div>Welcome to my app!</div>
</template>
<script>
class MyApp extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({mode: "open"});
const template = document.getElementById("template");
const clone = document.importNode(template.content, true);
shadow.appendChild(clone);
}
}
customElements.define("my-app", MyApp);
</script>
But it doesn't seem to work. The <my-app /> tag is not rendered at all in the DOM and I get this error on the console:
Uncaught TypeError: Cannot read property 'content' of null
What cannot I retrieve the template node? What am I doing wrong?
What I would also like to know is if I am allowed to write an HTML document without the boilerplate code (doctype, head, body, ...), because it's meant to describe a component and not an entire document to be used as is. Is it allowed by the HTML5 specs and/or is it correctly interpreted by a majority of browsers?
Thank you for your help.
While inside the template, don't use the document global:
<template id="template">
<div>Welcome to my app!</div>
</template>
<script>
class MyApp extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({mode: "open"});
// while inside the imported HTML, `currentDocument` should be used instead of `document`
const currentDocument = document.currentScript.ownerDocument;
// notice the usage of `currentDocument`
const template = currentDocument.querySelector('#template');
const clone = document.importNode(template.content, true);
shadow.appendChild(clone);
}
}
customElements.define("my-app", MyApp);
</script>
Plunker demo: https://plnkr.co/edit/USvbddEDWCSotYrHic7n?p=preview
PS: Notes com compatibility here, though I assume you know HTML imports are to be deprecated very soon.
This question already has answers here:
Google Forms file upload complete example
(2 answers)
Closed 5 years ago.
I'm trying to create an interface to display a csv using Google script. However, whenever I load the file I get this error
`1729820382-mae_html_user_bin_i18n_mae_html_user.js:39 Uncaught TypeError: Failed due to illegal value in property: 0
at Td (1729820382-mae_html_user_bin_i18n_mae_html_user.js:39)
at Pd (1729820382-mae_html_user_bin_i18n_mae_html_user.js:39)
at 1729820382-mae_html_user_bin_i18n_mae_html_user.js:6
at 1729820382-mae_html_user_bin_i18n_mae_html_user.js:21
at Object.fileToCsv (1729820382-mae_html_user_bin_i18n_mae_html_user.js:38)
at loadFile (<anonymous>:10:23)
at HTMLInputElement.onchange (VM1402 userCodeAppPanel:1)`
The console log is showing the file correctly, but it seems to be tripping up when it tries to pass it to the Google script. Do I need a special file reader?
HTML is here
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<input type="text" id="itemHolder" name="itemHolder" style="display:none"/>
<input type="file" id="myFile" name="myFile" onchange="loadFile(event)"/>
<p id="textStuff"></p>
</body>
</html>
<script type="text/javascript">
function loadFile(event) {
var input = event.target.files[0];
console.log(input)
google.script.run.fileToCsv(input);
}
function printout(array){
console.log("Try")
var spot = document.getElementById('textStuff');
spot.innerHTML = array;
}
</script>`
GAS Here
function fileToCsv(myFile){
var strData = myFile.getBlob().getDataAsString();
Logger.log(strData);
return strData;
//return CSVToArray( strData )
}
You need to pass the entire form object to code.gs file. Refer the below code.
HTML
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<form id="testForm">
<input type="text" id="itemHolder" name="itemHolder" style="display:none"/>
<input type="file" id="myFile" name="myFile" onchange="loadFile(event)" accept=".csv"/>
<p id="textStuff"></p>
</form>
</body>
</html>
<script type="text/javascript">
function loadFile(event) {
var inputData = event
google.script.run.withSuccessHandler(printout).fileToCsv(document.getElementById("testForm"));
}
function printout(array){
var spot = document.getElementById('textStuff');
spot.innerHTML = array;
}
</script>
Code.gs
function fileToCsv(form){
var fileData = form.myFile
return fileData.getBlob().getDataAsString()
}
This question already has answers here:
Angularjs Uncaught Error: [$injector:modulerr] when migrating to V1.3
(5 answers)
Closed 6 years ago.
my controller.js file
function ServicesCtrl($scope) {
console.log("Hello From ServicesCtrl");
$scope.message = "Hello";
}
index.html file
<html>
<head>
<title>The MEAN Stack</title>
<link href="css/bootstrap.css" rel="stylesheet" />
<script src="js/angular.min.js"></script>
<script src="features/services/controller.js"></script>
</head>
<body ng-app="">
<div class="container" ng-controller="ServicesCtrl">
<h1>Service Client Maker</h1>
{{message}}
</div>
</body>
</html>
it is not displaying my message. controller.js file is not accessable
Its clear that you are trying to define a controller like a simple js function.
But, It works in a different way.
You have to initialize an angular app within an java-script variable like this,
var app=angular.module("MyApp");
and handle that entire angular application, through that js variable "app".
I strongly recommend you to completely go through below tutorials.. Then, Start creating the App..
https://www.tutorialspoint.com/angularjs/angularjs_mvc_architecture.htm
http://www.w3schools.com/angular/default.asp
You have to define your angular application and its modules.
var app = angular.module('myApp');
app.controller('serviceController', function() {
$scope.message = "Nice, I now know how to create an angular app";
})
And you will now be able to access it on your page:
<body ng-app="myApp">...
<div ng-controller="serviceController">...
{{message}}
This should help you since you're getting started with angular.
Here this example
define your controller name (controller.js)
var app = angular.module('myApp', []);
app.controller('ServicesCtrl', function($scope) {
$scope.message = "Hello";
});
define your app name (index.html)
<body ng-app="myApp">
<div class="container" ng-controller="ServicesCtrl">
<h1>Service Client Maker</h1>
{{message}}
</div>
</body>