Код JSFiddle не работает на моей странице

У меня есть код, который работает в JSFiddle, но я не могу запустить его на своей странице.

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)'
            + ')'
            ); 
});

Если я возьму код и вставлю файлы HTML/JS (ссылка в голове)/CSS (ссылка в голове), CSS работает, а JavaScript - нет.

Я пытался заменить $(this) с идентификатором элемента, но все равно не повезло.

Источник

3 ответа

Решение

"Если я возьму код и вставлю HTML/JS (ссылка в голове)"

Проблема в том, что вы поместили свой код в <head>, так что он работает до того, как входные элементы были проанализированы, а затем $('input[type="range"]') не находит элементов.

Если вы посмотрите на опции "Frameworks & Extensions" в JSFiddle, вы заметите, что он помещает ваш код JS в onload обработчик по умолчанию, поэтому ваш код не запускается, пока не загрузится вся страница. Чтобы код вел себя так же на вашей собственной веб-странице, вам нужно обернуть его в onload ваш собственный обработчик или - поскольку вы используете jQuery - оберните его в обработчик готовых документов:

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

Или короткая форма выглядит так:

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

Или включите ваш скрипт в конец страницы, чтобы он запускался после того, как элементы, которыми он пытается манипулировать, были проанализированы.

Источник
  1. В редакторе скрипки нажмите на javaScript+No-Library(чистый JS)
  2. Выпадающее меню предоставит вам варианты.
  3. 3-й вариант load-Type- нажмите на нее и выберите Нет wrap-bottom of<head>
  4. Запустите ваш код
  5. Наслаждайтесь!
Источник

Вы удостоверились, что включили библиотеку jQuery в свой заголовок? Для всех видов библиотек, посетите сайт разработчиков Google. https://developers.google.com/speed/libraries/ Вот библиотека jQuery, которую вы ищете - убедитесь, что вы разместили это ПЕРЕД файлом JS.

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

^ Это должно быть в вашем заголовке.;)

Источник
Другие вопросы по тегам