I am still a beginner in JavaScript. I have written a code with two nested for-loops. It achieves the result but that is too large to be copied in Android. It copies part but not all data.
How can I export my data as .csv file or .txt file i.e. a button in HTML file, I click on it then the data is exported as .csv?
My HTML code:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<button onclick="convert()"> Convert </button>
</body>
</html>
My JavaScript code:
function convert(){
var lon,lat;
for(lat = 52 + (2226/3600) ; lat <= 52 + (2425/3600) ; lat=lat+(1/3600))
{
for(lon = 9 + (3539/3600) ; lon<= 10 + (215/3600) ; lon=lon+(1/3600))
{ document.write("W,"+lat+","+lon+"<br>") }
}
};
My data are browsed fully and without problem in webpage HTML as followed after clicking convert button:
W,52.61833333333333,9.983055555555556
W,52.61833333333333,9.983333333333333
W,52.61833333333333,9.98361111111111
W,52.61833333333333,9.983888888888886
W,52.61833333333333,9.984166666666663 ..........
W,52.61833333333333,9.98444444444444
Hopefully I can export all these data so as .csv or .txt file.
Related
So, I want to make a program that will be able to get user data(a ton of bug names separated by commas), go through, get data for each one, then display all of that data in a table. I have been through rewriting this like 5 times and still nothing happens. Anyone know what is wrong with this code?
My html code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 align="center">Bugs</h1>
<p>In the area below, type in each of the insects you want information
about, seperate them with a comma.</p>
<textarea id="insects"></textarea>
<br>
<button type="button" id="go">Find out!</button>
<br>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
document.getElementById('go').onclick = function() {
var input = document.getElementById('insects').value;
var splitted = input.split(',');
for (i = 0; i<splitted.length; i++) {
var bug1 = splitted[i];
var part1 = // I need to assign it to bug1 without any whitespace
var finish = part1.toLowerCase();
find1(bug1);
}
}
function find1(bug) {
var xmlDocument = $.parseXML("externalfile:drive-77136639a78ffb21e72c7c4dfe7f7bb73604aeb3/root/Bugs/bugs.xml");
var pain = $(xmlDocument).find("value[type='" + bug + "'] pain").text();
alert(pain); <!-- This is to see if it works -->
}
</script>
</body>
Here is my XML code(btw the XML file is called bugs.xml and yes they are in the same exact folder in My Drive/Bugs:
<?xml version="1.0" encoding="UTF-8"?>
<bugs>
<bug type="blisterbeetle">
<name>Blister Beetle</name>
<pain>55</pain>
<conservation></conservation>
<habitat></habitat>
<rarity></rarity>
<class></class>
<order></order>
<family></family>
<species></species>
<dangerous></dangerous>
<external></external>
</bug>
</bugs>
Since manipulating clipboard is forbidden in Google App, I want to find a workaround by using Clipboard.js library.
My questions are:
1. How should I import a Clipboard.js library to Google App Script?
2. And how to call the functions in other pages (eg. trying to call the function calculateWeight() from BMI.gs in index.html?
What I've tried:
I've tried to paste the source code of the Clipboard.js into a file called Clipboard.js.html and put everything inside the tag.
What I want achieve:
Copy a text string with a click on the "COPY" button.
>>what I want to achieve
I've spent a few hours looking for solutions but still can't find related info. Any help would be greatly appreciated. Thank you!
Your script can have more than one html file, and per the HTML Services: Best Practices, you should have your HTML, CSS and (client side) Javascript in separate files. So in your case your index.html file will be all the HTML code and will have a couple lines added. It could start as shown below:
<!DOCTYPE html>
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.4.0/clipboard.min.js"></script>
<?!= include('myCSS'); ?>
<title>Give it a Title</title>
</head>
<body>
...
All the Body stuff
...
</body>
<?!= include('myScript'); ?>
</html>
At the top of this is a line to include clipboard JS from a hosted location. I found that via a web search for clipboard.js. This is where I get access to the clipboard.js library There is a line right underneath this:
<?!= include('myCSS'); ?>
In a server side file (.gs file) I have the following so that I can include other HTML files from the one I load in my doGet() function:
function include(filename) {
return HtmlService.createTemplateFromFile(filename).evaluate()
.getContent();
}
I am loading the HTML in my doGet using this code to use Templated HTML:
function doGet(passed) {
if(passed.parameter.festival && passed.parameter.year){
passedParameter = passed.parameter.festival + ' ' + passed.parameter.year;
}
var result=HtmlService.createTemplateFromFile('index').evaluate()
.setTitle('My Title')
.setWidth(1285)
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
return result;
}
Under the File pull-down you create a new HTML file called myCSS and add your CSS there:
<style>
h1 {
color: #0F6B5E;
font-size: 300%;
text-align:center;
vertical-align: middle;
font-family: 'Raleway', sans-serif;
font-weight:bold;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
</style>
Create a new HTML file called myScript and add the screipt you want used in your HTML page here. This is the Client Side script as opposed to SErver Side script, which is all in the Script files. (HTML files will show the .html extension in the list of files while server side Script files will have .gs) If your calculateWeight() function is used to calculate and display items in the HTML page, then place it in this file:
<script>
//Script to load after the page has loaded
$(function() {
google.script.run.withSuccessHandler(showMenuYear).withFailureHandler(loadFailed).getDropDownContent();
});
calculateWeight() {
//code goes here
}
function showMenuYear(menuItems) {
var list = $('#optionListYear');
var desiredValue = '<?!= passedParameter ?>';
list.find('option').remove(); // remove existing contents
list.append('<option value="-1">Select a Festival and Year</option>');
for (var i = 0; i < menuItems.length ; i++) {
list.append('<option value=' + menuItems[i].sheetrow + '>' + menuItems[i].fullFestival + '</option>');
if (menuItems[i].fullFestival === desiredValue){
list.val(menuItems[i].sheetrow);
}
}
setFormList();
}
function setFormList() {
// alert('In setFormList ');
// alert($('#optionListYear').val());
var replacement = document.getElementById("OverallGrid");
replacement.innerHTML = "Retrieving Registrations...";
if ($('#optionListYear').val() === "-1") {
// if(passedData.year && passedData.festival){replacement.innerHTML = passedData.festival & " " & passedData.year;};
replacement.innerHTML = "Select a Festival/Year above.";
return;
}
google.script.run.withSuccessHandler(showRegistrationsTable).withFailureHandler(loadFailed).getValidRegistrations($('#optionListYear').val());
}
function loadFailed(error){
var replacement = document.getElementById("OverallGrid");
var displayMessage = "Error loading data: " + error.name + ' ' + error.message;
if (error.message.includes("is missing (perhaps it was deleted?)") ) {
displayMessage = "You do not have access to these registrations."
}
replacement.innerHTML = displayMessage;
}
</script>
In this code, the lines starting with google.script.run will run a Server Side function, passing a variable to the function if needed. If Successful, the Client side function defined in withSuccessHandler(successFunction) will be used with any returned data being passed. So in my example the showMenuYear(menuItems) function is run on the Client side with menuItems being set to the returned value from the Server side function getDropDownContent(). If the Server side returns an error, the loadFailed(error) function is executed. This all comes from the line:
google.script.run.withSuccessHandler(showMenuYear).withFailureHandler(loadFailed).getDropDownContent();
for an assignment I need to write a code to display an array in alphabetical order and count the items in the array. I can do this fine but the last requirement is to put the JavaScript into an external file. how do I do this exactly? below is my code and what i need to put in an external file but I have no idea how to do this.
This is the finished code but i need everything in the script tags to be in an external file
<!DOCTYPE html>
<html>
<head></head>
<body>
<h2>Question 2 Array</h2>
<p id="array"></p>
<button onclick="alpha()">Sort alphabetically</button>
<button onclick="count()">Count items in array</button>
<script>
var products = [" Printer", " Tablet", " Router", " Keyboard", " Mouse", " PC"];
document.getElementById("array").innerHTML = products;
function alpha() {
document.getElementById("array").innerHTML = products.sort();
}
function count() {
document.getElementById("array").innerHTML = products.length;
}
</script>
</body>
</html>
just to narrow it down here is the things to go external.
var products = [" Printer", " Tablet", " Router", " Keyboard", " Mouse", " PC"];
document.getElementById("array").innerHTML = products;
function alpha() {
document.getElementById("array").innerHTML = products.sort();
}
function count() {
document.getElementById("array").innerHTML = products.length;
}
Put your code in myFile.js and link this file to your HTML file, like this :
<script src="myFile.js" type="text/javascript"></script>
<!DOCTYPE html>
<html>
<head>
<script src="path_to_external_file"></script> <!-- here comes your javascript file path -->
</head>
<body>
</body>
</html>
It is really simple
<script src="path to your .js file"></script>
As an example create a JS file called site. Then your js file should be site.js. Put your all javascript codes in that file.
Then call it in html <head> after all css. Keep in mind if you are using jQuery put you js file after jquery include.
<script src="../js/yourjavascriptfile.js"></script>
Put inside a .js file and link it within the head tags, the src=" place of file " should be the relative/absolute path to where the file is located.
I am trying to read a file in the same directory of an HTML and JavaScript file however it seems to be returning null. Below I have added the code I have from each file.
HTML File:
<html>
<!-- Code to call the Google Maps API and link style.css sheet -->
<body>
<div class="content">
<div id="googleMap"></div>
<div id="right_pane_results">hi</div>
<div id="bottom_pane_options">
<button onclick="get_parameters()">Try It</button>
</div>
</div>
</body>
<script type="text/javascript" src="./javascript.js">
</script>
</html>
JavaScript File:
function get_parameters() {
alert("hi"); // Just to let me know the function is getting called
var freader = new FileReader();
var text;
freader.onload = function(e) {
text = freader.result;
}
freader.readAsText('./test.txt', "ISO-8859-1");
text = freader.result; // To my knowledge, this should be taking the current line freader is on and storing it into text
var div = document.getElementById('bottom_pane_options');
div.innerHTML = div.innerHTML + text;
}
test.txt
Iron
Aluminum
Steel
//etc. for x number of times (depends on data I have parsed previously)
All I would like is for JavaScript to read test.txt and parse it into an array (text). The issue is, when I click the button 'Try It', the alert pops up (telling me the function is being called) and text contains null. I am running all files off my computer and all are in the exact same directory.
I'm learning a bit HMTL5 to prepare to the 70-480 exam. I'm trying to do some javascript code. It looks something like this:
function inchestometers(inches) {
if (inches < 0)
return -1;
else {
var meters = inches / 39.37;
return meters;
}
}
var inches = 12;
var meters = inchestometers(inches);
document.write("the value in meters is " + meters);
var hello = document.getElementById("hello");
hello.firstChild.nodeValue = "Hello World";
and I have such html code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Htnl 5 test</title>
<script src="script/test.js"></script>
</head>
<body>
<p id="hello">Hello</p>
</body>
</html>
In my VS 2012 i have used the Asp.net Empty Web application project and added the Js file and also the html file. The problem is that The function runs properly without any exeptions. This function is taken from here: http://msdn.microsoft.com/en-us/library/cte3c772(v=vs.94).aspx
But whem I'm trying to run the code where I'm getting the document element it' crashint with the error like in the subject. What I've investigated is that the hello gets the null value. I've also tried the code thaken from here:
http://msdn.microsoft.com/en-us/library/yfc4b32c(v=vs.94).aspx - the example with the div. I have the same effect.
What is wrong? I know that there were simmilar subjects but I can't seem to find one matching to mine. Thank you kindly for your help.
Regards
Rafal
you are getting a problem because your javascript code is running before the element
<p id="hello">
is defined.
the simplest solution is to include your script at the end of the body section instead of in the head section but this would cause the document.write call to occur after the rest of the content.
another solution would be to place the code inside two functions like this
function do_conversion() {
var inches = 12;
var meters = inchestometers(inches);
document.write("the value in meters is " + meters);
}
function say_hello() {
var hello = document.getElementById("hello");
hello.firstChild.nodeValue = "Hello World";
}
then change the body section like this
<body onload='say_hello()'>
<script>
do_conversion();
</script>
<p id="hello">Hello</p>
</body>