為什麼我的 JavaScript 範圍滑桿從 JSFiddle 移動到外部頁面時不起作用？
JSFiddle 程式碼在外部頁面上出錯
在嘗試將功能代碼從JSFiddle 遷移到外部頁面時，用戶遇到了意外行為，其中JavaScript 元件停止運行.
程式碼設定
使用者提供了以下HTML、CSS 和JavaScript code:
<body>
登入後複製
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 位於
中，在解析輸入元素之前執行。補救措施
要修正問題，使用者可以採用以下三種解決方案之一：
- 將程式碼包含在 onload中，或最好是在文件就緒處理程序中，例如，
$(document).ready(function() {
// your code here
});登入後複製
- 利用文件就緒處理程序的縮寫形式：
$(function() {
// your code here
});登入後複製
- 移動包含以下內容的腳本標記的位置JavaScript 程式碼放在頁面末尾，允許在程式碼之前解析元素執行。
以上是為什麼我的 JavaScript 範圍滑桿從 JSFiddle 移動到外部頁面時不起作用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
如何修復KB5055518無法在Windows 10中安裝？
1 個月前
By DDD
如何修復KB5055523無法在Windows 11中安裝？
1 個月前
By DDD
<🎜>：種植花園 - 完整的突變指南
3 週前
By DDD
<🎜>：泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
如何修復KB5055612無法在Windows 10中安裝？
3 週前
By DDD
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
如何使用HTML，CSS和JavaScript創建動畫倒計時計時器
Apr 11, 2025 am 11:29 AM
您是否曾經在項目上需要一個倒計時計時器？對於這樣的東西，可以自然訪問插件，但實際上更多
當您看上去時，CSS梯度變得更好
Apr 11, 2025 am 09:16 AM
我關注的一件事是Lea Verou＆＃039; s conic-Gradient（）Polyfill的功能列表是最後一項：
