How to get JavaScript text to show? - javascript

This is for a class I'm taking. Its homework out of the book for a particular chapter. The book provides some code that is purposly not working and you have to fix it. I've got it all working exept for this part where youre supposed to get some text to show up at the bottom of the screen that displays the last time the document was modified.
Ive gone over it repeatably and cant find whats wrong. Im wondering if the book has it wrong.
<head>
<script type="text/javascript">
function CopyRight() {
var lastModDate = document.lastModified
var lastModDate = lastModDate.substring(0,10)
xxx.innerHTML = "<p style='font-size:8pt;'>The URL of this document is "+document.URL+"<br />Copyright Frank's Fix-t Hardware. This document was last modified "+lastModDate+".</p>"
</script>
</head>
<body>
<div id="xxx"></div>
</body>

The mistakes are in your program
Missing closing curly } brace.
Not invoking the function CopyRight()
Inside CopyRight() not getting the xxx element to work on this.
Script should be invoked when the dom is ready (so placed script after xxx tag)
Correct version of your program is
<html>
<head>
</head>
<body>
<div id="xxx"></div>
<script type="text/javascript">
function CopyRight() {
var xxx = document.getElementById('xxx'); //mistake 3
var lastModDate = document.lastModified
var lastModDate = lastModDate.substring(0,10)
xxx.innerHTML = "<p style='font-size:8pt;'>The URL of this document is "+document.URL+"<br />Copyright Frank's Fix-t Hardware. This document was last modified "+lastModDate+".</p>"
} //mistake 1
CopyRight(); //mistake 2
</script>
</body>
</html>

This is the working one. The code works fine but you forgot to call the CopyRight function.
<head>
<script type="text/javascript">
function CopyRight() {
var lastModDate = document.lastModified
var lastModDate = lastModDate.substring(0,10)
xxx.innerHTML = "<p style='font-size:8pt;'>The URL of this document is "+document.URL+"<br />Copyright Frank's Fix-t Hardware. This document was last modified "+lastModDate+".</p>"
}
CopyRight(); // Call Copyright function
</script>
</head>
<body>
<div id="xxx"></div>
</body>

Related

How to display month fetched via JS in html email contents.?

code.gs
function showMonth() {
var recipient1 = 'user#gmail.com';
var subject = "email subject";
// send email using html page
var emailTemplate = HtmlService.createTemplateFromFile('file');
MailApp.sendEmail(recipient1, subject,'',{'htmlBody': emailTemplate.evaluate().getContent(), 'cc': '', 'bcc': ''});
}
file.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h2>My First Web Page</h2>
<p>My First Paragraph.</p>
<p id="displaymonth"> </p>
<script>
var d = new Date();
var mnth = getMonthDetails();
function getMonthDetails() {
switch (d.getMonth()) {
case 9 :
return "October";
break;
}
document.getElementById("displaymonth").innerHTML = "Current month is " + mnth;
</script>
</body>
</html>
Output in email:
My First Web Page
My First Paragraph.
I'm trying to get date and month in JS script tag and posting them to HTML content.
Later fetching the same HTML content using email template service of Google Apps Script and sending an email to user to show the current month.
When I run the code on other online editor like jsfiddle.net, it is showing the month details on the results page. However, I cannot get the expected result in the email upon running the code on Google Apps Script.
Let me know a way to fix my code to see the expected results. Thanks!
This way your email and your webapp get the same contents
Most of the contents comes from a text file that's written in html. And then in the function getContents() I append the line with the month in it. That function provides content to the doGet() and the sendEmail().
aq1.gs
function getContents() {
var folder=DriveApp.getFolderById('folderId');
var file=folder.getFiles().next();//assume only one
var contents=file.getBlob().getDataAsString()+Utilities.formatString('<p>This month is %s</p>',Utilities.formatDate(new Date(), Session.getScriptTimeZone(),"MMMM" ));//get content from file and append the date to it as a string
return contents;
}
function sendEmail() {
var recipient1 = 'recipient email';
var subject = "Combining Email and Website Contents";
var html=getContents();
MailApp.sendEmail(recipient1, subject,'',{htmlBody:html});
}
function doGet() {
return HtmlService.createHtmlOutputFromFile('aq5');
}
function launchDiaog() {
var userInterface=HtmlService.createHtmlOutputFromFile('aq5');
SpreadsheetApp.getUi().showModelessDialog(userInterface, "My Dialog");
}
aq5.html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
console.log('Ready State Function');
google.script.run
.withSuccessHandler(function(hl){
console.log(hl);
$('#mydiv').html(hl);
})
.getContents();
});
console.log("My Code");
</script>
</head>
<h1>Testing</h1>
<div id="mydiv"></div>
</html>
This is the contents of the ascii text file:
<h2>My First Web Page</h2><p>My First Paragraph.</p><p>My second paragrah</p>
But it could be anything upto 50MB
Try getting the date on the app script then passing it as a variable into your HTML file.
I don't think your client side js code will be executed by the Apps Script.

Why hasn't effects this piece of JavaScript code?

I read a JavaScript book and it gives you a piece of code to run but when I do I don't get anything. It runs but displays nothing.
var theNumber = Number(prompt("Pick a number", ""));
alert("Your number is the square root of " +
theNumber * theNumber);
I'm running this piece of code inside a Harp project, where _layout.jade looks like:
doctype
html
head
link(rel="stylesheet" href="/main.css")
body
!= yield
<script src="main.js" type="text/javascript"></script>
and main.js
var theNumber = Number(prompt("Pick a number", ""));
alert("Your number is the square root of " +
theNumber * theNumber);
I know that configuration is ok because I've been running another pieces of code before that one. Google Chrome runs the code but doesn't displays any window. I thought it could be adPause but it wasn't. Anyone knows what could it be happening?
Thanks
If you are opening the .js file in chrome, you'll just view it as raw text. You need to include it in a html page, like so:
<html>
<head>
<script type='text/javascript'>
window.onload = function()
{
var theNumber = Number(prompt("Pick a number", ""));
alert("Your number is the square root of " + (theNumber * theNumber));
}
</script>
</head>
<body>
<!-- page content, if any -->
</body>
</html>
-- OR --
<html>
<head>
<script type='text/javascript' src='script.js'></script>
</head>
<body>
<!-- page content, if any -->
</body>
</html>
script.js:
window.onload = function()
{
var theNumber = Number(prompt("Pick a number", ""));
alert("Your number is the square root of " + (theNumber * theNumber));
}

Issue with wisdom generator

I am trying to display random wisdom on a web page but I cannot figure out why the code below does not work.
Thank you
My javascript external file is:
function random(low, high) {
return Math.floor(Math.random()*(high-low+1)) + low;}
function randomarr() {
var arr = new Array("...1", "...2", "...3");
return arr[random(0, arr.length-1)];}
function display(){
var k = randomarr();
alert(k);}
and my html file
In the head section I've got:
<script type="text/javascript">
src="java.js"
</script>
And in the body section I've got:
<p>
<script type="text/javascript">
document.write(display());
</script>
</p>
The syntax for including the script in the <head> is wrong. Try this:
<script type="text/javascript" src="java.js"></script>

not able to load contents in div using javascript

this is shan and i'm a javascript noob and i'm trying to work qa code as an example here. i'm trying to load a small javascript content to a div element but it is not working any help would be great and here is the code.
<html>
<head>
<title>
using d for statement
</title>
<script>
function displaytext () {
var loopindex=0;
var sum=0;
for (var loopindex=1; loopindex <=100; loopindex++) {
sum +=loopindex;
};
document.getElementById('targetdiv').innerhtml="adding 1 to 100 gives "+sum;
}
</script>
</head>
<body>
<div id="targetdiv">
</div>
</body>
</html>
You need to call the function. It's also a good idea to wait until the window is loaded (or you can use some more advanced JS to detect the DOM ready state.):
<html>
<head>
<title>
using d for statement
</title>
<script>
function displaytext() {
var loopindex=0;
var sum=0;
for (var loopindex=1; loopindex <=100; loopindex++) {
sum +=loopindex;
};
document.getElementById('targetdiv').innerHTML = "adding 1 to 100 gives "+sum;
}
window.onload = function(){
displaytext();
}
</script>
</head>
<body>
<div id="targetdiv">
</div>
</body>
</html>
3 problems:
You never actually call the function. It is only declared.
The property is innerHTML not innerhtml. Javascript is case-sensitive.
The script is above an element is is referencing. As scripts are executed as they are found (page construction is paused during execution) the element you are referring to is never found.
Also you declare the loopindex variable twice, which i think will cause a syntax error on ES5 strict.
<html>
<head>
<title>
using d for statement
</title>
</head>
<body>
<div id="targetdiv">
</div>
</body>
<script>
function displaytext () {
var sum=0;
for (var loopindex=1; loopindex <=100; loopindex++) {
sum +=loopindex;
};
document.getElementById('targetdiv').innerHTML="adding 1 to 100 gives "+sum;
}
displaytext();
</script>
</html>

Trying to parse xml file for javascript quiz

I am trying to create a javascript quiz, that gets the questions from a xml file. At the moment I am only starting out trying to parse my xml file without any success. Can anyone point me to what I am doing wrong?
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="prototype.js"></script>
</head>
<body>
<div class="spmArr">
</div>
<script type="text/javascript">
var quizXML = '<quiz><Sporsmal tekst="bla bla bla"/><alternativer><tekst>bla</tekst><tekst>bli</tekst><tekst correct="yes">ble</tekst></alternativer><Sporsmal tekst="More blah"/><alternativer><tekst>bla bla</tekst><tekst correct="yes">bli bli</tekst><tekst>ble ble</tekst></alternativer></quiz>'
var quizDOM = $.xmlDOM( quizXML );
quizDOM.find('quiz > Sporsmal').each(function() {
var sporsmalTekst = $(this).attr('tekst');
var qDiv = $("<div />")
.addClass("item")
.addClass("sporsmal")
.appendTo($(".spmArr"));
var sTekst = $("<h2/>")
.html(sporsmalTekst)
.appendTo(qDiv);
});
</script>
</body>
</html>
When I try this in my browser the classes and div are not being created. And the page is just blank. Am i doing something wrong when I intialize the xml?
edited to add prototype.js and close function
Looks like you're forgetting to close your .each call. append ); after the statement for sTekst and your call will parse correctly.

Categories