المشكلة هي أن dataset.sourceربما لا تكون موجودة دائمًا، حيث أنّ dataset عبارة عن خاصية في JavaScript تسمح لك بالوصول إلى خصائص HTML مخصصة محددة باستخدام أسماء خصائص HTML مخصصة كمفاتيح.
لذا عليك التحقق من وجود خاصية source:
if (element.parentNode.dataset.source) {
myUrl = element.parentNode.dataset.source;
} else {
console.error("لا توجد خاصية `source` محددة في `dataset`");
}
أو الإعتماد على خاصية getAttribute للوصول إلى قيمة الخاصية المخصصة، مع التحقق من وجودها أولاً:
const sourceAttribute = element.parentNode.getAttribute("data-source");
if (sourceAttribute) {
myUrl = sourceAttribute;
} else {
console.error("لا توجد خاصية `source` محددة في `dataset`");
}
أيضًا لا تستخدم value مع dataset، فهي تستخدم مع عناصر نموذج HTML مثل <input> و <select>.
عامًة إليك مثالك امل:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<title>مثال تعيين src لعنصر iframe</title>
</head>
<body>
<div id="my-container" data-source="https://www.example.com">
<iframe id="my-iframe"></iframe>
</div>
<script>
const myContainer = document.getElementById('my-container');
const myIframe = document.getElementById('my-iframe');
if (myContainer.dataset.source) {
myIframe.src = myContainer.dataset.source;
} else {
console.error('لا توجد خاصية `source` محددة في `dataset`');
}
</script>
</body>
</html>
عند مشاركة كود على الإنترنت أرجو منك نسخ الكود ولصقه بشكل نصي وليس صورة، بذلك تمكن الآخرين من مساعدتك وإختبار الكود بشكل سريع، ولا أرى في كود HTML لديك أي سمة باسم data-source أو data-type
مجتمع لمناقشة وتبادل الخبرات حول تطوير الويب. ناقش أحدث التقنيات، اللغات، والأدوات في عالم تطوير المواقع والتطبيقات. شارك مشاريعك، اسأل عن نصائح، وتعاون مع مطورين محترفين وهواة.
