اذهب إلى المحتوى
  • 0

npm webpack erorrs

علي يعقوب

السؤال

لدي سؤالين .

الاول: لماذا عندما اقوم باغلاق الcard  الموجوده داخل الأسئلة الأكثر شيوعاً لا يتغر اتجاه السهم الى الاعلى ؟

الثاني: لماذا عندما لا تظهر ايقونة الفيديو مع تنسيقاتها ؟

وايضا لا يعمل الفيديو عند النقر ع مشاهدة الفيدو او ايقونة الفيدو ؟ وظهر لي هاد الخطا Uncaught ReferenceError: playPause is not defined at HTMLButtonElement.onclick

شكرا لكم واسف ع الاطالة.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

و عليكم السلام و رحمة الله . 

  1. بالنسبة لسؤالك الأول : 

لا يزال عليك عمل التفاعلية المطلوبة بنفسك , بملف index.js قم بإضافة الأسطر التالية : 

$('.collapse')
  .on('show.bs.collapse', function () {
  $(this).prev().find('svg')
    .removeClass('fa-angle-down')
    .addClass('fa-angle-up')
})

  .on('hide.bs.collapse', function () {
  $(this).prev().find('svg')
    .removeClass('fa-angle-up')
    .addClass('fa-angle-down')
});

. و بالطبع يجب عليك تعريف الحالة الإفتراضية للأسهم , إما فوق أو تحت : 

<i class="fa fa-angle-down" aria-hidden="true"></i> 

    2. السؤال الثاني : 

لم يعمل الفيديو بسبب أنك تقوم بتعريف الدالة بعد نسبها للـ Event Listener على هذا النحو : 

var myvideo=document.getElementById("video1");

myvideo.addEventListener("click", function playPause() {
	
    if(myvideo.paused)
    myvideo.play();
    else
    myvideo.pause();
  
}, false);

و : 

 <section class="video">
            <video id="video1">
                <source src="./videos/video.mp4" type="video/mp4">
            </video>
            <div class="overlay ">
                <button onclick="playPause()">
                    <i class="fa fa-video-camera" aria-hidden="true"></i>
                    مشاهدة الفيديو
                </button>
            </div>
        </section>

في حين أنك تستدعي دالة غير معرفة أصلا وإسم هاته الدالة داخل تعريف الـ Event Listener متجاهل أصلا . 

فحل المشكلة إما بتعريف الدالة خارجا على هذا النحو : 

myvideo.addEventListener("click", function(){ playPause(); } , false);


function playPause() {
	
    if(myvideo.paused)
    myvideo.play();
    else
    myvideo.pause();
  
}

أو بربط الEvent Listener بالزر عوضا عن الفيديو نفسه فيكون : 

var myvideo=document.getElementById("video1");
var playVideoButton=document.getElementById("playVideoButton");

playVideoButton.addEventListener("click", function playPause() {
	
    if(myvideo.paused)
    myvideo.play();
    else
    myvideo.pause();
  
}, false);

و طبعا لا تنسى تعريف الزر بـ ID: 

 <section class="video">
            <video id="video1">
                <source src="./videos/video.mp4" type="video/mp4">
            </video>
            <div class="overlay ">
                <button id="playVideoButton">
                    <i class="fa fa-video-camera" aria-hidden="true"></i>
                    مشاهدة الفيديو
                </button>
            </div>
        </section>

و أفضل إستعمال الطريقة الثانية لأن العنصر بالايدي video غير ظاهر و لاحظ أن الoverlay فوقه فهو غير قابل للوصول أما عن الزر فهو غير ذلك . 

أما عن تنسيق زر تشغيل الفيديو فيمكنك إستبدال الأيقونة بغيرها : 

<div class="overlay ">
                <button id="playVideoButton">
                    <i class="fa fa-play" aria-hidden="true"></i> 
                    مشاهدة الفيديو
                    
                </button>
            </div>

و بالطبع لا تنسى أن تقوم بإعادة compile للملفات عن طريق : 

npm run build

ملاحظات : 

لا أعلم إن كنت قد واجهت نفس الأخطاء بالنسبة للwebpack على هذا النحو :

> product@1.0.0 build
> webpack serve --mode development

sh: 1: webpack: Permission denied

بحيث تم حلها عن طريق تغيير الوضع :

chmod 775 -R /product

و لا ألزمك طبعا و لكن من اﻷفضل , و كشيء من الشائع بين الأوساط , تعريف السكربت watch عوضا عن build بملف package.json , كما يجب أيضا عمل سكربت للproduction : 

"scripts": {
    "watch": "webpack serve --mode development",
    "prod" : "webpack serve --mode production"
  },

فيتم الإستدعاء كالتالي : 

npm run watch

npm run prod

 

تم التعديل في بواسطة Adnane Kadri
رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 18 دقائق مضت قال Adnane Kadri:

و عليكم السلام و رحمة الله . 

  1. بالنسبة لسؤالك الأول : 

لا يزال عليك عمل التفاعلية المطلوبة بنفسك , بملف index.js قم بإضافة الأسطر التالية : 


$('.collapse')
  .on('show.bs.collapse', function () {
  $(this).prev().find('svg')
    .removeClass('fa-angle-down')
    .addClass('fa-angle-up')
})

  .on('hide.bs.collapse', function () {
  $(this).prev().find('svg')
    .removeClass('fa-angle-up')
    .addClass('fa-angle-down')
});

. و بالطبع يجب عليك تعريف الحالة الإفتراضية للأسهم , إما فوق أو تحت : 


<i class="fa fa-angle-down" aria-hidden="true"></i> 

    2. السؤال الثاني : 

لم يعمل الفيديو بسبب أنك تقوم بتعريف الدالة بعد نسبها للـ Event Listener على هذا النحو : 


var myvideo=document.getElementById("video1");

myvideo.addEventListener("click", function playPause() {
	
    if(myvideo.paused)
    myvideo.play();
    else
    myvideo.pause();
  
}, false);

و : 


 <section class="video">
            <video id="video1">
                <source src="./videos/video.mp4" type="video/mp4">
            </video>
            <div class="overlay ">
                <button onclick="playPause()">
                    <i class="fa fa-video-camera" aria-hidden="true"></i>
                    مشاهدة الفيديو
                </button>
            </div>
        </section>

في حين أنك تستدعي دالة غير معرفة أصلا وإسم هاته الدالة داخل تعريف الـ Event Listener متجاهل أصلا . 

فحل المشكلة إما بتعريف الدالة خارجا على هذا النحو : 


myvideo.addEventListener("click", function(){ playPause(); } , false);


function playPause() {
	
    if(myvideo.paused)
    myvideo.play();
    else
    myvideo.pause();
  
}

أو بربط الEvent Listener بالزر عوضا عن الفيديو نفسه فيكون : 


var myvideo=document.getElementById("video1");
var playVideoButton=document.getElementById("playVideoButton");

playVideoButton.addEventListener("click", function playPause() {
	
    if(myvideo.paused)
    myvideo.play();
    else
    myvideo.pause();
  
}, false);

و طبعا لا تنسى تعريف الزر بـ ID: 


 <section class="video">
            <video id="video1">
                <source src="./videos/video.mp4" type="video/mp4">
            </video>
            <div class="overlay ">
                <button id="playVideoButton">
                    <i class="fa fa-video-camera" aria-hidden="true"></i>
                    مشاهدة الفيديو
                </button>
            </div>
        </section>

و أفضل إستعمال الطريقة الثانية لأن العنصر بالايدي video غير ظاهر و لاحظ أن الoverlay فوقه فهو غير قابل للوصول أما عن الزر فهو غير ذلك . 

أما عن تنسيق زر تشغيل الفيديو فيمكنك إستبدال الأيقونة بغيرها : 


<div class="overlay ">
                <button id="playVideoButton">
                    <i class="fa fa-play" aria-hidden="true"></i> 
                    مشاهدة الفيديو
                    
                </button>
            </div>

و بالطبع لا تنسى أن تقوم بإعادة compile للملفات عن طريق : 


npm run build

 

شكرا كثيرا لك لكنني اواجه مشكلة كيف اعلم بهاذه الامور بحثت كثيرا عن النت لكنني لم اجد اي طريقة كيف تصبح لدي هذه المعرفة وكيف ادرب نفسي ع البحث  لكي استطيع حل مشاكلي بنفسي ؟

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 28 دقائق مضت قال علي يعقوب:

شكرا كثيرا لك لكنني اواجه مشكلة كيف اعلم بهاذه الامور بحثت كثيرا عن النت لكنني لم اجد اي طريقة كيف تصبح لدي هذه المعرفة وكيف ادرب نفسي ع البحث  لكي استطيع حل مشاكلي بنفسي ؟

طبعا العملية ستصبح سهلة مع التعود على مواجهة الأخطاء و حلها , لكن هذا لا يمنع من جعلها منهجية و منظمة لغرض إختصار الوقت و تنظيم العمل أكثر فحل مشكلة ما ,برأيي, يتطلب : 

  1. مشكلة ! فبالطبع يجب أن تكون لديك مشكلة و من الواجب قراءتها و التأني في ذلك .

  2. إعادة إنتاج المشكلة و عزل كود مصدر المشكلة : أحب عادة حذف الأسطر التي تكون مسؤولة عن المشكلة , فإختفاء الخطأ يعني ثبوتها . ثم أقوم بإعادة انتاج المشكلة من جديد . هذا يجعلك تقوم بعزل كود المصدر المسؤول و وضع نظرتك على نطاق أضيق و أدق , فالتركيز في ثلاث أسطر أو أربع أفضل من التركيز في مشروع كامل أو ملف كامل.

  3. قم بوصف المشكلة : كأن تحاول الحصول على أكبر عدد من المعلومات عن هاته المشكلة . (مثال عن ذلك : الزر يشتغل و يستدعي دالة بالفعل لكن الـ console يقول أن هاته الدالة غير معرفة , و أرى أني قد عرفتها بالفعل في ملف index.js)
  4. بناءا على ذلك حاول الإجتهاد في حل المشكلة مما جمعت من وصف للمشكلة و تحديد لكود المصدر المسؤول , و لا بأس ببحث على الانترنت عن مشاكل إما مشابهة في الخطأ الظاهر أو في الوصف و الطرح أو السياق أو كود مصدر المشكلة .

و ستصبح العملية سهلة و أبسط مع مرور الوقت و التعود على الأخطاء و على حلها . و قد يقودك إنتقال المشاكل من بسيطة , إلى معقدة إلى معقدة جدا , إلى تعلم الخوارزميات و الproblem solving التي ستنقل الأمر إلى مستوى اخر من التنظيم و المنهجية.

تم التعديل في بواسطة Adnane Kadri
رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...