[SOLVED - 2 Days Later function] Javascript - write to a div (.innerHTML)

carlywight

Using Twine 1.4.2
Sugarcane header

So I'm trying to print a date, 2 days in advance. (Wednesday, July 16, 2014, for example)
I managed to get the below to work when using document.write, but of course document.write overrides the entire page because it is happening after the page has loaded.

<script>
function displayDate() {
var months = new Array(12);
months[0]="January";
months[1]="February";
months[2]="March";
months[3]="April";
months[4]="May";
months[5]="June";
months[6]="July";
months[7]="August";
months[8]="September";
months[9]="October";
months[10]="November";
months[11]="December";
var days = new Array(7);
days[0]="Sunday";
days[1]="Monday";
days[2]="Tuesday";
days[3]="Wednesday";
days[4]="Thursday";
days[5]="Friday";
days[6]="Saturday";
var thisDate=new Date();
var interval = 2; //Setting the interval as a variable to show its applicability
var curDay=thisDate.getDay()-0+interval;
var curMonth=thisDate.getMonth();
var curDate=thisDate.getDate()-0+interval;
var curYear=thisDate.getFullYear();
document.write(""+days[curDay]+", "+months[curMonth]+" "+curDate+", "+curYear);
}
</script>


I thought replacing

document.write(""+days[curDay]+", "+months[curMonth]+" "+curDate+", "+curYear);

with

document.getElementById('foo').innerHTML = ""+days[curDay]+", "+months[curMonth]+" "+curDate+", "+curYear;

would do the trick, and adding the div 'foo' to the passage I want it to appear on, but unfortunately nothing is showing up.

Any thoughts as to what I could be missing? I'm putting this code in to a copy of the Sugarcane header at the moment as I'm still not entirely across how to convert javascript in to a macro. Yet! I'm working on it!

Cheers,

L

I think you're not using the Javascript Date object to its full potential. For instance, I'm pretty sure your code will fail if you run it on the 31st.


var nextDate = new Date();
var interval = 2;
// One day is 86400000 milliseconds.
// Adding two days' worth of milliseconds advances
// the Date two days in the future.
// Using milliseconds is generally the only way to add
// and subtract time without having to account for
// month and year boundaries.
nextDate.setTime( nextDate.getTime() + (86400000 * interval);

var result = days[nextDate.getDay()]+", "+months[nextDate.getMonth()]+" "+nextDate.getDate() +", "+nextDate.getYear();


For more information about the Date object, see this page: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

Additionally, I feel like you're not using Arrays to their full potential either. You should instead write "months" and "days" like this:


var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];


Now, as for making this usable within Twine... consider putting all of that into a function, like so:


window.TwoDaysLater = function() {
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var nextDate = new Date();
var interval = 2;

nextDate.setTime( nextDate.getTime() + (86400000 * interval);
return days[nextDate.getDay()]+", "+months[nextDate.getMonth()]+" "+nextDate.getDate() +", "+nextDate.getYear();
}


Then, you can use it in a macro like so:


<<print TwoDaysLater()>>


carlywight

Thanks L,
Good call on the dates. I thought about that in an earlier attempt...but obviously promptly forgot to consider it in further attempts when that one didn't work!
And yes, your method for months and days is much better. Thank you for cleaning that up!!

The line

nextDate.setTime( nextDate.getTime() + (86400000 * interval);

flagged issues in Dreamweaver, (even though it didn't tell me why!) and building with this code caused the whole thing to say
"Sorry to interrupt, but this page's code has got itself in a mess (SyntaxError: missing ) after argument list).
You may be able to continue playing, but some parts may not work properly."
So I added ) to make it

nextDate.setTime( nextDate.getTime() + (86400000 * interval));

which made it much happier.

Date then printed fine, except for the year which is apparently 114. 114 years since 1900?
So I changed

"+nextDate.getYear()

to

"+nextDate.getFullYear()

And it's all good!

Had a colleague come in and try and help me work out why it wasn't working to begin with; he picked up the ) ...I just didn't press space/enter to parse it and remove the error message, so we thought it hadn't worked when we had actually fixed it by adding the ). We ended up with this:

<script>
window.TwoDaysLater = function() {
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var nextDate = new Date();
var interval = 2;
var ms = nextDate.getTime();
nextDate.setTime( ms+86400000 * interval);
return days[nextDate.getDay()]+", "+months[nextDate.getMonth()]+" "+nextDate.getDate() +", "+nextDate.getFullYear();
}
</script>


which produces the right result but has an extra line of which isn't needed.

Thank you very much for your help!!