JSFiddle code not working in my own page

I have some code that is working in JSFiddle but which I can't get to run in my own page.

HTML

<body style="background-color: #000000">
  <form oninput="amount.value=range.value" style="color:#1ec2c5;">
  <output name="amount" for="range">2</output><a> KM</a>
  <input type="range" name="range" min="1" max="9" step="1" value="2" id="test">
</body>

CSS

input[type="range"]{
  -webkit-appearance: none;
  -moz-apperance: none;
  border-radius: 6px;
  width: 225px;
  height: 6px;
  border: 2px solid #eceef1;
  outline:none;
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(0.15, #eceef1),
    color-stop(0.15, #0c0d17)
  ); }

input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  background-color: #1ec2c5;
  border: 3px solid #000000;
  height: 25px;
  width: 25px;
  border-radius: 20px;}

JavaScript

$('input[type="range"]').change(function () {
var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));

$(this).css('background-image',
            '-webkit-gradient(linear, left top, right top, '
            + 'color-stop(' + val + ', #eceef1), '
            + 'color-stop(' + val + ', #0c0d17)'
            + ')'
            ); 
});

If I take the code and put in the HTML/JS (linked in head)/CSS (linked in head) files, the CSS works but the JavaScript does not.

I've tried replacing $(this) with the id of the element but still no luck.

"If I take the code and put in the HTML/JS (linked in head)"

The problem is that you've put your code in the <head>, so it runs before the input elements have been parsed and so then $('input[type="range"]') finds no elements.

If you look at the "Frameworks & Extensions" options in JSFiddle, you'll notice that it puts your JS code in an onload handler by default, so your code doesn't run until the whole page has loaded. For the code to behave the same way on your own web page you'd need to wrap it in an onload handler of your own, or - since you're using jQuery - wrap it in a document ready handler:

$(document).ready(function() {
    // your code here
});

Or the short form is like this:

$(function() {
    // your code here
});

Or include your script at the end of the page, so that it runs after the elements it tries to manipulate have been parsed.

javascript - JSFiddle code not working in my own page, JSFiddle is for: Demos for docs · Bug reporting (test-case) for Github Issues · Presenting code answers on Stack Overflow · Live code collaboration · Code  When you put the code in your page, either place it at the end of the page, before the closing body tag, or wrap it in a document ready handler: $( document ).ready(function() { // Your code here }); On jsFiddle.net, the onLoad option on the left automatically wraps your code in a window.load call:

Have you made sure that you've included the jQuery library in your header? For all kinds of libraries, check out Google's Developer Site. https://developers.google.com/speed/libraries/ Here's the jQuery Library you're looking for - make sure you place this BEFORE your JS file.

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

^ That should be in your header. ;)

JSFiddle, How are you viewing the jsfiddle website, if not with a browser? ; ). But seriously: how does your markup+code differ from that which you put in  Podcast: We speak with Matt Cutts about leading the United States Digital Services and the role software can play in government. Listen now.

  1. In your fiddle editor click on javaScript+No-Library(pure JS)
  2. The drop-down menu will give you options.
  3. The 3rd option is load-Type- click on it and select No wrap-bottom of<head>
  4. Run your code
  5. Enjoy!

working in jsfiddle but not in the browser., I have it working in jsfiddle, but it does not work on my website or home on the page, in the same manner as your own javascript code. level 2. jsfiddle code working but when in demo page is not. It adds a submenu in a menu using jquery 1.9.0, onDomReady and Normalized css as you can see on the jsfiddle. For instance the html is: the result is: But there is an issue, I am adding the code to a server I have access, and Added the lines: to emulate those in jsfiddle.

[HTML, CSS, Jscript] Code working on Jsfiddle but not on my , Well, we talked this over and decided the problem isn't really jsfiddle it's just super We do special case direct links to their home pages, so you can still mention and similar services are OK but a question or answer should stand on its own. There is an issue with how JSFiddle is coded (missing value in sandbox attribute of the iframe they are using to display the result). That makes it such it won't work on some version of chrome. I sent an issue report on their github. I was that much interested in it because I thought the issue I'm having on my website was the same but no. Cheers.

Prevent posts with links to jsfiddle and no code, Maybe SO could include stripped-down jsFiddle pages in iframes if it sees a link A central problem of the design of the fiddle is the question whether it should who hadn't even attempt to isolate the problems with their own code to give it a  The code below works on a live site but I can't get it to run on the site jsfiddle. See this for example. Can anyone tell me why it's not working on jsfiddle? On the console it logs: ReferenceError: fillList is not defined and ReferenceError: mySelectList is not defined. The code works as you can see when it's embedded here as snippet:

Custom jsFiddle for Stack Overflow, IIIE PLFWERTILINI Ever feel like you Want to run some code Without having to To see a good example Of a playground, type jsfiddle.net into your browser. All code belongs to the poster and no license is enforced. JSFiddle or its authors are not responsible or liable for any loss or damage of any kind during the usage of provided code. Links. Bug tracker Roadmap (vote for features) About Docs Service status

Comments
  • did you add the jquery library into your html like <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  • yes sir the script is added in my <head> <script></script> </head>
  • Hi, and thank you for your answer. The javascript code is of course in a different file, which is linked in the <head>. i have tried your suggestion and it works!. Thank you sir !
  • Very nicely explained!
  • Man you are a genius. Saved me from banging my head against the table unnecessarily
  • Hey and thank you for your answer. yes i have the script included in my <head, unfortunately, no luck.
  • Whoops, overlooked what you had said. Misunderstood it.