為什麼我的 JavaScript 範圍滑桿從 JSFiddle 移動到外部頁面時不起作用？

JSFiddle 程式碼在外部頁面上出錯

在嘗試將功能代碼從JSFiddle 遷移到外部頁面時，用戶遇到了意外行為，其中JavaScript 元件停止運行.

程式碼設定

使用者提供了以下HTML、CSS 和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)'
            + ')'
            ); 
});

問題根源

儘管將程式碼放入外部頁面的 HTML、JavaScript 和 CSS 檔案中，但 JavaScript 部分仍無法執行。

關鍵的見解來自 JSFiddle 將使用者的 JavaScript 程式碼放置在 onload 處理程序中。因此，只有在整個頁面載入後才會執行該程式碼。然而，在外部頁面中，JavaScript 位於

中，在解析輸入元素之前執行。

補救措施

要修正問題，使用者可以採用以下三種解決方案之一：

1. 將程式碼包含在 onload中，或最好是在文件就緒處理程序中，例如，

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

2. 利用文件就緒處理程序的縮寫形式：

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

3. 移動包含以下內容的腳本標記的位置JavaScript 程式碼放在頁面末尾，允許在程式碼之前解析元素執行。

以上是為什麼我的 JavaScript 範圍滑桿從 JSFiddle 移動到外部頁面時不起作用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！