12 خطای رایج جاوا اسکریپت و نحوه رفع آن

12 خطای رایج جاوا اسکریپت – در هر زبان برنامه نویسی خطا هایی وجود دارد که نیازمند تجربه کافی برای رفع آن خطا می باشد .

به طور کلی چند نوع خطا داریم :

1. syntaxerror : معمولا به خطا عدم رعایت syntax به وجود می آید مثلا یکی از کوتیشن ها را نگذاریم
2. typeerror : این ارور به دلیل عدم رعایت در رفتار با متغیر و توابع به وجود می آید مثلا به یک متغیر null یک property اضافه کنیم
3. run time error : این خطا همانطور که از اسمش پیداست هنگام اجرا برنامه به وجود می آید : مثلا خطای در ajax یا خطا هنگام کار با video در جاوا اسکریپت

1- خطای Uncaught TypeError: document.getElementByID is not a function at

این خطا به دلیل فراخوانی تابعی است که از قبل تعریف نشد چه توسط کاربر چه توابع پیش تعیین شده مثلا getElementById را به صورت getElementByID بنویسیم .

var x = document.getElementByID('username');

رفع این خطا : باید تابعی که فرخوانی کرده ایم را تعریف کرده باشیم یا نام آن را به درستی وارد کنیم مثل getElementById

var x = document.getElementById('username');

2- خطای Uncaught ReferenceError: Invalid left-hand side in assignment at

به دلیل مقدار دهی اشتباه به وجود می آید .

atob("ba") = 23

رفع این خطا : دقت کافی هنگام کد نویسی این اصلا منطقی نیست که مقدار را به تابع با استفاده از = بدهیم .

3- خطای Uncaught TypeError: Converting circular structure to JSON –> starting at object with constructor ‘Object’

هنگامی که متغیری را داخل دیگری به صورت reference می دهیم و می خواهیم آن را به JSON تبدیل کنیم این خطا به وجود می آید

var val1 = { };
var val2 = { a: val1 };
val1.b = val2;
JSON.stringify(val1);

رفع این خطا : عدم استفاده از متغیر reference در هنگام ساخت JSON از آن

var val1 = { };
var val2 = { a: "some other value" };
val1.b = val2;
console.log(JSON.stringify(val1));

4- خطای Uncaught SyntaxError: missing ) after argument list

زمانی که پرانتز را نبندیم این خطا رخ می دهد

atob("Senior X"

رفع این خطا : دقت کافی و بستن پرانتز

atob("Senior X");

5- خطای Uncaught TypeError: Failed to execute ‘addEventListener’ on ‘EventTarget’: 2 arguments required, but only 1 present

زمانی که تابع نیازمند 2 ورودی است ولی یکی وارد می شود

document.addEventListener("DOMContentLoaded" , );

رفع این خطا : وارد کردن تعداد مناسب ورودی برای تابع یا متود

document.addEventListener("DOMContentLoaded" , function(event){});

6- خطای Uncaught SyntaxError: Unexpected end of input

زمانی که curly braces را نبندیم این خطا به وجود می آید

function showData(){

رفع این خطا : دقت کافی و بستن curly braces

function showData(){}

7- خطای Uncaught SyntaxError: Invalid or unexpected token

عدم بستن کوتیشن باعث نمایش این خطا می شود

const postContent = "hey rapidcode.ir

رفع این خطا : دقت کافی و بستن کوتیشن

const postContent = "hey rapidcode.ir"

8- خطای Uncaught TypeError: Cannot read properties of null (reading

زمانی که بخواهیم از یک داده غیر object دسترسی داشته باشیم به property با این خطا مواجه می شویم .

var data = null;
console.log(data.username);

رفع این خطا : در صورتی که متغیر دارای داده object بود از property آن استفاده کنیم .

var data = null;
if(data != null && data.username)
    console.log(data.username);

9- خطای Uncaught TypeError: Cannot set properties of null (setting

در صورتی که بخواهیم به نوع داده غیر object به آن property دهیم با این خطا روبرو می شویم .

var data = null;
data.username = "senior_x";

رفع این خطا : نوع داده غیر object را به object تبدیل کنیم .

var data = null;

if(data == null){
	data = {};
	data.username = "senior_x";

10- خطای Uncaught RangeError: Maximum call stack size exceeded

در صورتی که فراخوانی تابع را به صورت زنجیره ای انجام دهیم با این خطا مواجه می شویم .

function showNumber(number){
	return showNumber(number);
}

console.log(showNumber(2));

رفع این خطا : فراخوانی تابع را به صورتی انجام دهیم که باعث پیدایش فرخوانی زنجیره وار نباشد .

function showNumber(number){
	return 2 * number;
}

console.log(showNumber(showNumber(2)));

11- خطای XMLHttpRequest cannot load http://example.com/. No ‘Access-Control-Allow-Origin’ header is present on the requested resource

این خطا زمانی رخ می دهد که درخواست ajax را به سرور می فرستیم که دسترسی origin نداده باشد یا هدر آن تنظیم نشده .

رفع این خطا : با توجه به سرور header را با نام Access-Control-Allow-Origin به مقدار * یا آدرس سایت بدهیم .

در PHP به شکل زیر است :

header("Access-Control-Allow-Origin: *");

12- خطای InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable

به صورت کلی این خطا زمانی به وجود می آید که منبع که از آن استفاده می کنیم زودتر از زمانی موعد عملیاتی رو آن انجام می دهیم مثلا ویدیو به صورت کامل بارگذاری نشده و میخواهیم به یک بازه زمانی خاص پرش کنیم .

var videoDOM = document.getElementById('video1');
videoDOM.currentTime = 21;

رفع این خطا : در صورتی که منبع به صورت کامل بارگذاری شد عملیات مورد نظرمان را روی آن انجام دهیم .

var videoDOM = document.getElementById('video1');
videoDOM.addEventListener("canplaythrough",function(){
	videoDOM.currentTime = 21;
});

12 خطای رایج جاوا اسکریپت