Why Doesn't My JavaScript Range Slider Work When Moved from JSFiddle to an External Page?-CSS Tutorial-php.cn

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

DDD

Release： 2024-12-16 18:21:18

Original

329 people have browsed it

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:

<body>

Copy after login

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

Copy after login

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

Copy after login

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:

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

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

Copy after login

Utilize a shortened form of document ready handler:

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

Copy after login

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!