JSFiddle code not working in my own page

Question

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.

did you add the jquery library into your html like ` ` – Arun P Johny Jan 01 '14 at 03:17 — Arun P Johny, Jan 01 '14 at 03:17
yes sir the script is added in my – Bdevelle Jan 01 '14 at 03:37 — Bdevelle, Jan 01 '14 at 03:37

score 16 · Accepted Answer · answered Jan 01 '14 at 03:34

"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.

Hi, and thank you for your answer. The javascript code is of course in a different file, which is linked in the . i have tried your suggestion and it works!. Thank you sir ! — Bdevelle, Jan 01 '14 at 03:43
Man you are a genius. Saved me from banging my head against the table unnecessarily — compski, Jan 08 '19 at 10:04

score 1 · Answer 2 · answered Jan 01 '14 at 03:22

1

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. ;)

answered Jan 01 '14 at 03:22

John

320
2
9

Hey and thank you for your answer. yes i have the script included in my – Bdevelle Jan 01 '14 at 03:37
Whoops, overlooked what you had said. Misunderstood it. – John Jan 01 '14 at 05:08

score 1 · Answer 3 · edited Aug 14 '18 at 05:30

1

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

edited Aug 14 '18 at 05:30

franiis

1,378
1
18
33

answered Aug 14 '18 at 04:55

Fazeena Sehar

11
1

JSFiddle code not working in my own page

3 Answers3

Linked

Related