Why Doesn't My JavaScript Range Slider Work When Moved from JSFiddle to an External Page?

JSFiddle Code Stumbles on External Page

In an attempt to migrate functional code from JSFiddle to an external page, a user encounters unexpected behavior where the JavaScript component ceases to function.

Code Setup

The user provided the following HTML, CSS, and JavaScript code:

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;}

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

Root of the Issue

Despite placing the code into the external page's HTML, JavaScript, and CSS files, the JavaScript portion failed to execute.

The key insight came from the fact that JSFiddle places the user's JavaScript code within an onload handler. Therefore, the code is executed only after the entire page is loaded. In the external page, however, the JavaScript was positioned in the

, where it executed before the input elements had been parsed.

Remedy

To rectify the issue, the user can employ one of three solutions:

1. Enclose the code within an onload or, preferably, document ready handler, e.g.,

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

2. Utilize a shortened form of document ready handler:

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

3. Shift the placement of the script tag containing the JavaScript code to the end of the page, allowing for elements to be parsed before the code executes.

The above is the detailed content of Why Doesn't My JavaScript Range Slider Work When Moved from JSFiddle to an External Page?. For more information, please follow other related articles on the PHP Chinese website!