كيف يمكن استدعاء دالة بشكل صحيح في جافاسكربت؟

zzzzzi · 7 سبتمبر 2022

لماذا الكونسول في السطر 14 لا يعمل

async function get(){
const apiLink = await fetch("https://www.breakingbadapi.com/api/characters")
const data = await  apiLink.json()
 document.querySelector(".tagrba").innerHTML+=`<h1>${data[3].name}</h1>`

 
 document.querySelector(".tagrba").innerHTML+=` 
 <select onchange="actore(this.Value)">
${data.map (item => `<option> ${item.name}</option>`
)}
  </select>
`
function actore(e){ // هاته الاسطر
console.log(e); 
}
}
get();

Adnane Kadri · 7 سبتمبر 2022

من المهم جدا الاستعانة بنافذة الطرفية console لتشخيص الأخطاء والعمل عليها. في codepen يمكن الوصول اليها عن طريق الضغط على تبويبة console في الشريط السفلي.

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.PNG.a99d515c27316fde74bba80feb9c4a9e.PNG

عند التبديل بين خيارات القائمة المسندلة يظهر الخطأ:

Uncaught ReferenceError: actor is not defined

وذلك لأن الوظيفة actor المسندة لحدث onchange:

<div class="tagrba" onchange="actor(this.Valuo)">
    <h2 id="h2"> </h2>
</div>

غير معرفة فهي موجودة في شيفرة الجافاسكربت كـ actore

(انتبهي الى الخطأ في this.Valuo ايضا، هل تقصدين this.value؟)

أيضا، راجع اسناد وظيفة الى حدث onchage خاصة بعنصر div من الاساس.

سيضل الخطأ

Uncaught ReferenceError: actore is not defined

يظهر رغم اصلاح المشكلة، وهذا لأن الوظيفة actore معرفة بشكل محلي داخل الوظيفة get. لا يمكن استدعاءه من خارجها.

لاصلاح المشكلة قم باخراجها الى ما قبل او بعد الوظيفة get:

async function get() {
    const apiLink = await fetch("https://www.breakingbadapi.com/api/characters")
    const data = await apiLink.json()
    document.querySelector(".tagrba").innerHTML += `<h1>${data[3].name}</h1>`


    document.querySelector(".tagrba").innerHTML += ` 
 <select onchange="actore(this.Value)">
${data.map (item => `<option> ${item.name}</option>`
)}
  </select>
`

    
}
get();
function actore(e) {
        console.log(e);
}

معاذ قره محمد · 7 سبتمبر 2022

في ملف ال js عدّل على السطر ال select حيث value أول حرف فيها صغير:

<!-- <select onchange="actore(this.Value)"> -->
<select onchange="actore(this.value)"> <!-- فقط قمنا بتصغير أول حرف -->

ثانياً أنت عرّفت الطريقة actore ضمن الطريقة get بعدما استخدمتها، والواجب عليك إما أن تضعها في نفس الطريقة get لكن قبل استخدامها أو خارج الطريقة get ولا يفرق إن كان قبلها أو بعدها.

لماذا قبل استخدامها ضمن الطريقة؟ لأن المترجم ينفذ التعليمات داخل الطريقة سطراً سطراً وإذا كنت قد استخدمت طريقة ضمنية actore في مثالك قبل تعريفها سيولد الخطأ actore not define

لماذا إذا عرفت actore خارج الطريقة get لا يفرق إن كان قبلها أو بعدها؟ لأنه يمنحها نمط وصول عام فينشئ جميع الطرق التي عرفتها بشكل مباشر قبل تنفيذ أي كود، لهذا إن عرفت actore بعد الget أو قبلها لن يتولد أي خطأ.


async function get(){
const apiLink = await fetch("https://www.breakingbadapi.com/api/characters")
const data = await  apiLink.json()
 document.querySelector(".tagrba").innerHTML+=`<h1>${data[3].name}</h1>`

 
 document.querySelector(".tagrba").innerHTML+=` 
 <select onchange="actore(this.value)">
${data.map (item => `<option> ${item.name}</option>`
)}
  </select>
`

}
// get من الطريقة actore أخرجنا الطريقة
function actore(e){
console.log(e);
}
get();

وصحح كتابة value ضمن ملف الhtml

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Breaking Bad Api</title>
    <script defer src="js.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <!--actoreوال value انتبه هنا صحح كتابة ال -->
<!--<div class="tagrba" onchange="actor(this.Valuo)"> -->
<div class="tagrba" onchange="actore(this.value)">

<h2 id="h2"> </h2>
</div>
   
</body>

تم التعديل في 7 سبتمبر 2022 بواسطة معاذ قره محمد
إضافة توضيح

كيف يمكن استدعاء دالة بشكل صحيح في جافاسكربت؟

السؤال

zzzzzi

2 أجوبة على هذا السؤال

Recommended Posts

Adnane Kadri

معاذ قره محمد

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية