نحوه رفع خطای «uncaught typeerror: cannot set property» در جاوا اسکریپت
به عنوان یک توسعه دهنده ، هنگام کار با جاوا اسکریپت با خطاهایی مواجه خواهید شد.برای اینکه بتوانید این خطاها را برطرف کنید، باید بتوانید پیام خطا را درک کنید، این کار به شما کمک می کند تا متوجه شوید که چرا خطا مطرح شده است و چگونه می توانید آن را برطرف کنید.
در این آموزش، ما در مورد خطای “uncaught typeerror: can set property” در جاوا اسکریپت صحبت خواهیم کرد.
“Uncaught Typeerror: Cannot Set Property” در جاوا اسکریپت به چه معناست؟
این خطا عمدتاً زمانی رخ می دهد که پروژه شما حاوی داده‌های ناسازگار باشد. برخی از دلایل ایجاد این خطا عبارتند از:
- قرار دادن تگ اسکریپت در موقعیت اشتباه در نشانه گذاری شما
- خطاهای املایی هنگام ارجاع به عناصر DOM
- دسترسی به یک عنصر DOM تعریف نشده یا نامعتبر
نحوه رفع “uncaught typeerror: cannot set property” در جاوا اسکریپت
در این بخش، با علل رایج خطای «نوعی خطای کشف نشده: نمی‌توان خصوصیت را تنظیم کرد» در جاوا اسکریپت آشنا خواهید شد. هر بخش، به یکی از آن علل و راه حل آن اختصاص دارد.
قرار دادن برچسب script نامعتبر
هنگامی که یک صفحه وب بارگیری می شود، کد جاوا اسکریپت نوشته شده برای صفحه نیز بارگیری می شود. روشی که جاوا اسکریپت Document Object Model (DOM) را تشخیص می‌دهد به جایی که تگ اسکریپت را در کد خود قرار می‌دهید بستگی دارد.
اگر تگ اسکریپت را در تگ head یا بالاتر از همه عناصر HTML در تگ بدنه قرار دهید، اسکریپت قبل از آماده شدن DOM اجرا می شود.
وقتی جاوا اسکریپت قبل از آماده شدن DOM اجرا شود، نمی‌تواند نمایش کاملی از DOM دریافت کند – به این معنی که بیشتر متغیرهای شما که به عناصر DOM پیوند شده‌اند به صورت null برمی‌گردند. به عنوان مثال:
<!DOCTYPE html>
<html>
<head>
<title>Uncaught Typeerror Error Tutorial</title>
<script src="app.js"></script>
</head>
<body>
<h1 id="heading"></h1>
</body>
</html>کد بالا دارای تگ اسکریپت در تگ head است. ما همچنین یک عنصر h1 با شناسه عنوان هم در این کد داریم.
در مرحله بعد، سعی می کنیم متنی را به عنصر h1 اختصاص دهیم:
let heading = document.getElementById('heading');
heading.textContent = 'This is a heading';
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')اگرچه کد بالا خوب به نظر می رسد، اما خطای «نوعی خطای کشف نشده: نمی تواند ویژگی را تنظیم کند» را ایجاد می‌کند
اگر تگ اسکریپت را بالای سایر عناصر DOM قرار دهید، این خطا باز هم ایجاد می شود:
<!DOCTYPE html>
<html>
<head>
<title>Uncaught Typeerror Error Tutorial</title>
</head>
<body>
<script src="app.js"></script>
<h1 id="heading"></h1>
</body>
</html>اکنون تگ اسکریپت بالای عناصر DOM در تگ بدنه قرار دارد، اما همچنان خطای “uncapped typeerror: can set property” را ایجاد می کند زیرا اسکریپت قبل از DOM بارگیری می شود.
برای رفع این خطا، باید تگ اسکریپت را درست قبل از تگ بسته شدن بدنه قرار دهید. به این ترتیب، تمام عناصر DOM قبل از اسکریپت بارگیری می شوند.
در اینجا نمونه ای از قرارگیری صحیح آورده شده است:
<!DOCTYPE html>
<html>
<head>
<title>Uncaught Typeerror Error Tutorial</title>
</head>
<body>
<h1 id="heading"></h1>
<script src="app.js"></script>
</body>
</html>هنگامی که کد بالا اجرا می شود، عنصر h1 متن آن را روی “This is a heading” تنظیم می کند.
اشتباهات املایی
خطاهای املایی منبع دیگری برای افزایش خطای «uncaught typeerror: cannot set property» هستند.
هنگامی که ویژگی (ID یا کلاس) مورد استفاده برای شناسایی عنصر DOM در جاوا اسکریپت را به اشتباه تایپ کنید، قطعا کد شما null خواهد شد.
تلاش برای تخصیص یک مقدار به مقدار null، خطای “uncapped typeerror: can set property” را ایجاد می کند. مثلا:
<!DOCTYPE html>
<html>
<head>
<title>Uncaught Typeerror Error Tutorial</title>
</head>
<body>
<h1 id="heading"></h1>
<script src="app.js"></script>
</body>
</html>let heading = document.getElementById('headin');
heading.textContent = 'Hello World!'
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')دسترسی به DOM تعریف نشده
در بخش آخر، دیدیم که چگونه ارجاع دادن به یک ویژگی غلط املایی می‌تواند باعث ایجاد خطای «uncaught typeerror: cannot set property» شود. هنگامی که سعی می کنیم به عنصر DOM که وجود ندارد دسترسی پیدا کنیم، هم همین اتفاق می افتد.
به این مثال توجه کنید:
<!DOCTYPE html>
<html>
<head>
<title>Uncaught Typeerror Error Tutorial</title>
</head>
<body>
<h1></h1>
<script src="app.js"></script>
</body>
</html>let heading = document.getElementById('headin');
heading.textContent = 'Hello World!'
//Uncaught TypeError: Cannot set properties of null (setting 'textContent')همانطور که مشاهده می کنید، ما سعی کردیم محتوای متنی عنصر DOM ی را تنظیم کنیم که وجود خارجی ندارد. هیچ عنصری در کد HTML ما وجود ندارد که دارای شناسه “heading” باشد، بنابراین یک مقدار null برمی گرداند.
اگر به وارد کردن متغیر heading در کنسول ادامه دهید، مقدار null را دریافت خواهید کرد.
چگونه مشخص کنیم که یک متغیر «null» یا «undefined» است
تا مرحله متوجه شده‌اید که تخصیص یک مقدار به متغیری که null یا تعریف نشده است، به احتمال زیاد منجر به خطای «uncaught typeerror: cannot set property» می شود.
قبل از اینکه در مورد چگونگی تعیین null یا تعریف نشده بودن یک متغیر در جاوا اسکریپت صحبت کنیم، بهتر است تفاوت بین یک مقدار null و یک مقدار تعریف نشده را درک کنیم.
یک متغیر زمانی که یک مقدار خالی یا ناشناخته به متغیر اختصاص داده شود تهی می شود. بخش های قبلی این آموزش نمونه های عملی یک متغیر null را نشان می دهد.
از سوی دیگر، یک متغیر زمانی undefined است که هیچ مقداری به آن اختصاص داده نشده باشد:
let age;
console.log(age);
// undefinedدر کد بالا، متغیر age اعلام شده بود، اما هیچ مقداری به آن اختصاص داده نشد بنابراین وقتی این کد در کنسول وارد کردیم، undefined تعبیر شد.
شما می توانید از loose equality operator (==) برای تعیین تهی یا تعریف نشده بودن یک متغیر استفاده کنید. به عنوان مثال:
<!DOCTYPE html>
<html>
<head>
<title>Uncaught Typeerror Error Tutorial</title>
</head>
<body>
<h1 id="headin"></h1>
<script src="app.js"></script>
</body>
</html>let heading = document.getElementById('headin');
if (heading == null) {
console.log('Variable is null - cannot assign value to a null variable');
} else {
heading.textContent = 'Hello World!';
}
