{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 几人难应 的问题《JSFiddle code not working in my own page》','https://www.manongdao.com/q-14655.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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.
load-Type-click on it and select Nowrap-bottom of<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
onloadhandler 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 anonloadhandler of your own, or - since you're using jQuery - wrap it in a document ready handler:Or the short form is like this:
Or include your script at the end of the page, so that it runs after the elements it tries to manipulate have been parsed.
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.
^ That should be in your header. ;)