Pourquoi mon curseur de plage JavaScript ne fonctionne-t-il pas lorsqu'il est déplacé de JSFiddle vers une page externe ?

Le code JSFiddle trébuche sur une page externe

Dans une tentative de migration du code fonctionnel de JSFiddle vers une page externe, un utilisateur rencontre un comportement inattendu où le composant JavaScript cesse de fonctionner .

Configuration du code

L'utilisateur a fourni les éléments HTML, CSS et JavaScript suivants 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)'
            + ')'
            ); 
});

Racine du problème

Malgré le placement du code dans les fichiers HTML, JavaScript et CSS de la page externe, la partie JavaScript n'a pas pu s'exécuter.

L'idée clé vient du fait que JSFiddle place le code JavaScript de l'utilisateur dans un gestionnaire de chargement. Par conséquent, le code n’est exécuté qu’une fois la page entière chargée. Cependant, dans la page externe, le code JavaScript a été positionné dans

, où il s'est exécuté avant que les éléments d'entrée n'aient été analysés.

Remède

Pour remédier au problème, l'utilisateur peut utilisez l'une des trois solutions suivantes :

1. Introduisez le code dans un gestionnaire de chargement ou, de préférence, de document prêt, par exemple,

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

2. Utilisez une forme abrégée de gestionnaire de document prêt :

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

3. Déplacez l'emplacement de la balise de script contenant le Code JavaScript jusqu'à la fin de la page, permettant d'analyser les éléments avant l'exécution du code.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!