لماذا يفشل كود JavaScript على jsfiddle.net

يعرض الكود المقدم مشكلة عند محاولة التشغيل على jsfiddle.net، مع تسجيل وحدة التحكم "خطأ مرجعي: اسم الوظيفة" لم يتم تعريفه." لفهم ذلك، نتعمق في بنية الكود ونحلل تنفيذه داخل jsfiddle.

يحدد الكود وظائف مثل BetterSelect وfillList ضمن وظيفة تسمى window.onload. في بيئة الويب النموذجية، تضمن هذه الوظيفة تنفيذ التعليمات البرمجية بمجرد تحميل النافذة. ومع ذلك، ضمن إطار عمل jsfiddle، يقدم هذا الجانب تمييزًا حاسمًا.

عندما يتم تنفيذ التعليمات البرمجية على موقع مباشر، تكون الوظائف متاحة عالميًا داخل كائن النافذة لأنها محددة خارج أي نطاق وظيفي محدد. ومع ذلك، في jsfiddle، لا يمكن الوصول إلى الوظائف إلا ضمن نطاق وظيفة window.onload.

هناك العديد من الحلول لهذه المشكلة:

1. تحديد الوظائف عالميًا : قم بتغيير تعريفات الوظائف إلى window.functionName = function(){};.
2. غير مزعجة جافا سكريبت: افصل HTML عن JS لإرفاق السلوك بعناصر DOM من خلال JS فقط.
3. تعطيل التفاف jsfiddle الافتراضي: حدد "بدون التفاف" (النص أو الرأس) بدلاً من "onLoad."

من خلال معالجة مشكلة تحديد النطاق هذه، يمكنك التأكد من تنفيذ تعليمات JavaScript البرمجية بشكل صحيح على كل من المواقع المباشرة وjsfiddle.net.