asked on

Why does my godaddy web-server serve .htm correctly, but not .js ?

Hi
I'm surprised that when I put this javascript example (from a coding web-page) in my Godaddy public html folder, it didn't work, - it just printed the code.

Must I do anything special to tell the host that i's not plain text, but it's actually code..
I have both index.htm and index.js in the same folder
I have the javascript at the bottom, below, but
This is index.htm that works when called from my URL in my browser:

<HTML>
<HEAD>
<TITLE>Your Title Here</TITLE>
</HEAD>
<BODY BGCOLOR="FFFFFF">
<CENTER><IMG SRC="clouds.jpg" ALIGN="BOTTOM"> </CENTER>
<HR>
<a href="http://somegreatsite.com">Link Name</a>
is a link to another nifty site
<H1>This is a Header</H1>
<H2>This is a Medium Header</H2>
Send me mail at <a href="mailto:support@yourcompany.com">
support@yourcompany.com</a>.
<P> This is a new paragraph!
<P> <B>This is a new paragraph!</B>
<BR> <B><I>This is a new sentence without a paragraph break, in bold italics.</I></B>
<HR>
</BODY>
</HTML>

Open in new window

This is index.js that doesn't work, but just prints the code in the browser...

<html>
<head>
  <title>Multiplication Table</title>
  <script type="text/javascript">
    var rows = prompt("How many rows for your multiplication table?");
    var cols = prompt("How many columns for your multiplication table?");
    if(rows == "" || rows == null)
   		 rows = 10;
    if(cols== "" || cols== null)
   		 cols = 10;
    createTable(rows, cols);
    function createTable(rows, cols)
    {
      var j=1;
      var output = "<table border='1' width='500' cellspacing='0'cellpadding='5'>";
      for(i=1;i<=rows;i++)
      {
    	output = output + "<tr>";
        while(j<=cols)
        {
  		  output = output + "<td>" + i*j + "</td>";
   		  j = j+1;
   		}
   		 output = output + "</tr>";
   		 j = 1;
    }
    output = output + "</table>";
    document.write(output);
    }
  </script>
</head>
<body>
</body>
</html>

Open in new window

What might I be missing to have the browsers load the javascript?

David Favor

This just means the DirectoryIndex setting is different than you imagine.

Instead of .htm, try .html or .php for your file extension + likely problem will resolve.

Also you must rename index.js to something with a MIME type related to HTML.

Any link to a Javascript file should only print readable text.

Javascript files should only contain Javascript code (no HTML), then be included into your HTML to execute.

ASKER CERTIFIED SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

David Favor

Likely good to follow the template Chris provided for your HTML + Javascript.

Definitely best to update to HTML5.

Note: You mentioned this was some javascript example which is odd as it has zero chance of working as provided.

Best to keep this in mind when using any other example code from wherever you acquired this code.

James Hancock

ASKER

Thanks
I have another question with some working javascript out of my Godaddy, so I should hopefully be able to get some decent results soon.
DO you mean update the code to HTML5, or my server?

Chris Stanyon

Hi,

HTML5 is just the code you write, so nothing on the server needs to be updated. Just edit your code to use HTML5 (take a look at the HTML template I provided).

Jim Riddles

Okay, so I made a few modifications to the example. I broke apart the HTML and JavaScript for more clarity. See below and let me know if you have any questions. Although, as others have stated, I would probably look for better examples to learn from. W3Schools.com has excellent learning resources...check them out. Copy this file and save it in a new file ending with .html to behave correctly in the browser.

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Multiplication Table Example</title>
</head>
<body>
<label for="rows"># of rows</label>
<input type="text" id="rows" placeholder="defaults to 10"><br>
<label for="cols"># of columns</label>
<input type="text" id="cols" placeholder="defaults to 10"><br>
<button type="button" id="do_it">Create Table</button>
<script>
  //add a click handler for the button
  document.getElementById("do_it").onclick = createTable;
  
  function createTable()
  {
    //get the rows and cols values or set them to 10 if they are null
    //note that in an actual production environment you would be sure
    //that integer values were entered, as well
    var rows = document.getElementById("rows").value || 10;
    var cols = document.getElementById("cols").value || 10;
    var j = 1;

    //initialize the output string
    var output = "<table border='1' width='500' cellspacing='0' cellpadding='5'>";

    //loop through the rows
    for (i = 1; i <= rows; i++) 
    {
      output += "<tr>";
      while (j <= cols)
      {
        output += "<td>" + (i * j) + "</td>";
        j = j + 1;
      }
      output += "</tr>";
      j = 1;
    }
    output += "</table>";
    document.write(output);
  }
  </script>
  </body>
</html>

Open in new window

David Favor

You asked... "DO you mean update the code to HTML5, or my server?"

Yes to both questions...

1) Your *.html files will live on a server somewhere (if you expect public access).

2) Best to always use HTML5 for all HTML files.

James Hancock

ASKER

Thanks

David Favor

You're welcome!