JavaScript Not Running on Jsfiddle.Net

JavaScript not running on jsfiddle.net

The functions you define are defined in an onload function, so whereas before they were referenceable, because they are defined in that function they can only be referenced from within that function. You reference them as globals in your HTML. You have three options

a) ( easiest, quickest, not ideal ) - change function blah(){} to window.blah = function(){}; making the functions global.

b) ( ideal way ) - use unobtrusive Javascript to attach behaviour to DOM elements from within the JS solely, meaning separate HTML from JS.

c) Make the jsfiddle not wrap the stuff onload. Change onLoad to no wrap ( body or head ).

So instead of <p onclick="lol()" id="foo"> you'd do var e = document.getElementById('foo'); e.onclick = lol; in the JS only.

I recommend b as it encourages best practices.

Code working on jsfiddle.net doesn't work locally

I tried to remove the jquery.history.js file and replace it with the jquery that you're importing in your script tag and it throws the error you're mentioning.

I think you need to include the jquery.history.js file, that was included in the jsfiddle.

I would recommend that you try importing the following line into your head tag:

<script src="https://cdnjs.cloudflare.com/ajax/libs/history.js/1.8/bundled-uncompressed/html4+html5/jquery.history.js"></script>

javascript runs on w3schools.com but not on jsfiddle.net?

Sample Image

Change load type to No wrap in - <body>

Here is updated fiddle

Here is Docs

simple javascript not working in jsfiddle

By default, jsFiddle puts all of your code within an onload handler, like this:

window.onload = function() {
    // ...your code here...
};

That means your alertme function isn't a global, and it has to be for onclick attributes to work.

There's a drop-down on the left, near the top, that controls this behavior. Change it from onLoad to one of the "no wrap" options to make your function global.

Why is the code on jsfiddle.net not working in jsbin.com?

Try adding libraries under "external resources" from jsfiddle to jsbin.

Edit:
Yes you're right you added the libraries. I made it work putting JQuery as the first script since you can't load bootstrap before JQuery. Then change the http to https.

Code copied from jsfiddle.net is not working

The problem concerns your last "script" tag, you must specify the "src" or
the content between the tags, but never both. So if we remove the "src" attribute, it'll work as expected.

<html>

<body>
  <img class="north"
    src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSGPgQ8k88yaWVPRytT957hKLV-89QmZtkZc44q45TEDdqe9sKwqg">
  <input type="button" value="click me">
</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
  .north {
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    /* IE 9 */
    -webkit-transform: rotate(0deg);
    /* Safari and Chrome */
  }

  .west {
    transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    /* IE 9 */
    -webkit-transform: rotate(90deg);
    /* Safari and Chrome */
  }

  .south {
    transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    /* IE 9 */
    -webkit-transform: rotate(180deg);
    /* Safari and Chrome */

  }

  .east {
    transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    /* IE 9 */
    -webkit-transform: rotate(270deg);
    /* Safari and Chrome */
  }
</style>

<!-- Script -->
<script type="text/javascript">
  $('input').click(function () {
    var img = $('img');
    if (img.hasClass('north')) {
      img.attr('class', 'west');
    } else if (img.hasClass('west')) {
      img.attr('class', 'south');
    } else if (img.hasClass('south')) {
      img.attr('class', 'east');
    } else if (img.hasClass('east')) {
      img.attr('class', 'north');
    }
  });
</script>

</html>

Script not working on localhost but works in jsfiddle

JavaScript is attached before the closing body tag.

The browser stops parsing the page when it encounters a script tag. Therefore, so that the user sees the content as early as possible, the connection of scripts is delayed until the very last moment.

Try to do so.

<head>
  <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
  <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css">
</head>

<body>

  <table id="myTable" class="display" cellspacing="0" width="100%">
    <thead>
      ...
    </thead>
    <tbody>
      ...
    </tbody>
  </table>

  <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
  <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>

</body>

jsFiddle not working in Chrome

It's because the "language" is set as Javascript 1.7 in your jsFiddle.

Why does this only work in Firefox?

According to the versioning history, 1.7 was only ever supported in the Mozilla Firefox browser, hence why it works there and not in other browsers.

Solution:

Change the language from Javascript 1.7 to Javascript in the Languages section of your jsFiddle and it will work. I'm guessing you must have changed it to 1.7 specifically, because the default is normally just Javascript (you can see that by pasting your code into a new jsFiddle, where it will work as expected).

jsFiddle example.

Why isn't my JavaScript working in JSFiddle?

The function is being defined inside a load handler and thus is in a different scope. As @ellisbben notes in the comments, you can fix this by explicitly defining it on the window object. Better, yet, change it to apply the handler to the object unobtrusively: http://jsfiddle.net/pUeue/

$('input[type=button]').click( function() {
   alert("test");   
});

Note applying the handler this way, instead of inline, keeps your HTML clean. I'm using jQuery, but you could do it with or without a framework or using a different framework, if you like.

JavaScript Not Running on Jsfiddle.Net