Calendar script fails on new host

Error -> document.write('<img src="' + months[theDate.getMonth()+1] + '">')

[HeadElf]

Help please. I do not program in js. I have a problem I have no idea how to fix.

theDate= new Date();
months = new Array();
days = new Array();
months[1] ="jan.gif";
months[2] ="feb.gif";
months[3] ="mar.gif";
months[4] ="apr.gif";
months[5] ="may.gif";
months[6] ="june.gif";
months[7] ="jul.gif";
months[8] ="aug.gif";
months[9] ="sep.gif";
months[10] ="oct.gif";
months[11] ="nov.gif";
months[12] ="dec.gif";
days[1] ="1st.gif";
days[2] ="2nd.gif";
days[3] ="3rd.gif";
days[4] ="4th.gif";
days[5] ="5th.gif";
days[6] ="6th.gif";
days[7] ="7th.gif";
days[8] ="8th.gif";
days[9] ="9th.gif";
days[10] ="10th.gif";
days[11] ="11th.gif";
days[12] ="12th.gif";
days[13] ="13th.gif";
days[14] ="14th.gif";
days[15] ="15th.gif";
days[16] ="16th.gif";
days[17] ="17th.gif";
days[18] ="18th.gif";
days[19] ="18th.gif";
days[20] ="20th.gif";
days[21] ="21st.gif";
days[22] ="22nd.gif";
days[23] ="23rd.gif";
days[24] ="24th.gif";
days[25] ="25th.gif";
days[26] ="26th.gif";
days[27] ="27th.gif";
days[28] ="28th.gif";
days[29] ="29th.gif";
days[30] ="30th.gif";
days[31] ="31st.gif";
function printDate() {
document.write('<img src="' + months[theDate.getMonth()+1] + '">'); // month
//document.write('<br>');
//document.write('<img src="' + days[theDate.getDate()] + '">'); // day
}

Lines 2, 3, and 48 fail. Why and how do I fix it? It works perfectly on my local system and my old host but the new host has it failing.

[Fotiman]

I'm not sure which lines you're saying are failing. Do you mean these?
months = new Array();
days = new Array();
document.write('<img src="' + months[theDate.getMonth()+1] + '">'); // month

First, a few important points.
1. This is creating variables "theDate", "months", and "days" as global variables. It really should be using "var", "let", or "const" to declare those variables.
2. It's generally considered better practice to not use "new Array()", and instead just declare an array literal.
3. document.write can only be called prior to the page being loaded, otherwise it will replace the entire document. Your code doesn't show how you're calling printDate().

To start with, I would refactor this code to something like this:

const theDate = new Date();

const months = [
 "jan.gif",
 "feb.gif",
 "mar.gif",
 "apr.gif",
 "may.gif",
 "june.gif",
 "jul.gif",
 "aug.gif",
 "sep.gif",
 "oct.gif",
 "nov.gif",
 "dec.gif"
];

const days = [
 "1st.gif",
 "2nd.gif",
 "3rd.gif",
 "4th.gif",
 "5th.gif",
 "6th.gif",
 "7th.gif",
 "8th.gif",
 "9th.gif",
 "10th.gif",
 "11th.gif",
 "12th.gif",
 "13th.gif",
 "14th.gif",
 "15th.gif",
 "16th.gif",
 "17th.gif",
 "18th.gif",
 "18th.gif",
 "20th.gif",
 "21st.gif",
 "22nd.gif",
 "23rd.gif",
 "24th.gif",
 "25th.gif",
 "26th.gif",
 "27th.gif",
 "28th.gif",
 "29th.gif",
 "30th.gif",
 "31st.gif"
];

function printDate() {
 document.write('<img src="' + months[theDate.getMonth()] + '">'); // month
 //document.write('<br>');
 //document.write('<img src="' + days[theDate.getDate() - 1] + '">'); // day
}

Note, since I've created the months and days arrays as array literals, the indexes of those arrays start at 0, so how your get those values using their index is now adjusted down by 1.
Other than that, I think you'll need to provide more details about what exactly is failing.

[HeadElf]

That's an improvement. Now I'm getting an error on line 53.

document.write('<img src="' + months[theDate.getMonth()] + '">'); // month

[Fotiman]

What does the error message say?

[HeadElf]

"document.write can be a form of eval."

[lammert]

This is a JSLint warning message. Is it possible that on one host JSLint is used to check the script while on the other host it isn't? The message doesn't tell that the line of code is wrong. It tells that it is potentially unsafe to use.

[Fotiman]

That is likely an error message from JSLint, which is a tool that scans your code. In this case, it's not an error, it's a warning. Generally speaking, you should avoid using document.write because it's potentially destructive (as I mentioned above, if you call document.write after page load, it will replace your document). Instead, using DOM methods to append elements to your document is preferred.

[HeadElf]

Repeating . . . I don't program JS. I am php/mysql. What do I replace the line of script line with? Please?

[Fotiman]

There are many ways to skin that cat. One option would be to set the innerHTML on an existing DOM node. For example, in your HTML, include something like this:

<div id="currentDate"></div>

Then in your JavaScript function:

function printDate() {
 const content = '<img src="' + months[theDate.getMonth()] + '">';
 document.querySelector('#currentDate').innerHTML = content;
}

[HeadElf]

Thanks. That gets rid of one of the errors. I'm no closer to having my month gif appear but not having the error is a big help.

[not2easy]

Are all the image files in the same folder as the html where the script is found? The script appears to assume that they are.

[Fotiman]

Try this:

function printDate() {
 const content = '<img src="' + months[theDate.getMonth()] + '">' +
  '<br>' +
  '<img src="' + days[theDate.getDate() - 1] + '">';
 document.querySelector('#currentDate').innerHTML = content;
}

[HeadElf]

I hate to admit complete and total incompetence but I must. Full disclosure. What y'all have provided completely cleared all the erros. And when I MOVED THE IMAGE DIRECTORY TO THE RIGHT FOLDER everything worked perfectly. PERFECTLY.

Y'all have been awesome, completely and totally awesome. It's now working perfectly with zero error flags.

[Fotiman]

Happy to help. :)