Javascript Not Running in HTML

Question

Given the following:

HTML

<!DOCTYPE html>
<html>

<head>
<title>test</title>
</head>

<body>

<table>
 <tr class='foo'><td>one</td></tr>
 <tr class='foo'><td>two</td></tr>
 <tr class='foo'><td>three</td></tr>
</table>

  <script type="text/javascript" src="http://underscorejs.org/underscore.js"></script>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script type="text/javscript"  src="https://gist.githubusercontent.com/anonymous/d25940992da18e05f3f2d50889f6a4c2/raw/f013565c33d17abb33a4f5ad7717aae090873516/test.js"></script>
</body>

</html>

JS

// Generated by CoffeeScript 1.10.0
(function() {
  var hasChildren, rowsWithChildren;

  $(function() {
    return console.log('starting');
  });

  $(function() {
    var filtered, rows;
    console.log('here');
    rows = $('tr');
    filtered = rowsWithChildren(rows);
    return console.log(filtered);
  });

  rowsWithChildren = function(rows) {
    return _.filter(rows, function(r) {
      return hasChildren(r);
    });
  };

  hasChildren = function(row) {
    return row.children().length === 1;
  };

}).call(this);

When I open that HTML page in my Chrome Browser, I see the table on the screen. But, I don't see any console.log ... statements in the output of the Developer Tools Console.

Also, when I look at Dev Tool's Sources, I don't see the JS from gist.github.com....

What's wrong with this HTML?

which version, as i am getting printed (starting, here), please try with preserve log checkbox — developerCK
– developerCK, Commented Jul 15, 2016 at 13:29
I'd expect to see a mixed content error somewhere since you are mixing HTTP and HTTPS. — Quentin
– Quentin, Commented Jul 15, 2016 at 13:29
What trincot said. And after that you will get the error: "Refused to execute script from 'https://gist....test.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled." — Roland Starke
– Roland Starke, Commented Jul 15, 2016 at 13:40

Vidur · Accepted Answer · 2016-07-15 13:41:08Z

3

There's two problems with what you're attempting to do:

There's a typo on the line where you link to the Gist - should be text/javascript not text/javscript.
Github doesn't allow you to hotlink to code/assets hosted on their website - essentially you can't use them as a CDN. Here's a blog post from them explaining this in more detail.

answered Jul 15, 2016 at 13:41

Vidur

1,5912 gold badges19 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

trincot · Accepted Answer · 2016-07-15 13:35:18Z

2

The third script element has a wrong type value. With a wrong value, the loaded file will not be interpreted as JavaScript.

So change:

<script type="text/javscript"  ...

to:

<script type="text/javascript"  ...

answered Jul 15, 2016 at 13:35

trincot

357k38 gold badges282 silver badges338 bronze badges

Comments

ysurilov · Accepted Answer · 2016-07-15 13:34:39Z

-1

As I remember there is "onready" problem in this version of jQuery (I may be mistaken).

As for "text/javascript" it's unnecessary nowadays.

answered Jul 15, 2016 at 13:34

ysurilov

3001 silver badge16 bronze badges

Comments

Marcio Martins · Accepted Answer · 2016-07-15 13:34:56Z

-1

Try to merge your two $(function(){}) into one, and remove these "returns" inside them. Like this:

    (function() {
      var hasChildren, rowsWithChildren;

      $(function() {
        console.log('starting');

        var filtered, rows;
        console.log('here');
        rows = $('tr');
        filtered = rowsWithChildren(rows);
        console.log(filtered);
      });

      rowsWithChildren = function(rows) {
        return _.filter(rows, function(r) {
          return hasChildren(r);
        });
      };

      hasChildren = function(row) {
        return row.children().length === 1;
      };

    }).call(this);

Hope it helps.

answered Jul 15, 2016 at 13:34

Marcio Martins

3504 silver badges13 bronze badges

Collectives™ on Stack Overflow

Javascript Not Running in HTML

HTML

JS

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

HTML

JS

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related