نسخ عنصر div و إعطائه لون خلفية عشوائي [JAVASCRIPT]

بداية تحتاج كتابة كل الأشياء التي تتعلق بإستفسارك، ضع محاولتك، ضع شيء في السؤال يُمكن لأي مدرب أو من سيُجيب على سؤالك البدأ منه.

يُمكن تقسيم سؤالك إلى 3 أجزاء:

• كتابة دالة تقوم بجلب سلسلة نصية تُمثل لون عشوائي، من خلال البحث في النت يمكن الوصول لهذه الدالة:

function randColor() {
  return "#" + Math.floor(Math.random()*16777215).toString(16).padStart(6, '0').toUpperCase();
}


console.log(randColor()) // #AF4229

كل مرة يتم إستدعاء الدالة تقوم بإرجاع لون جديد.

• بناء نقطة البدأ من تجهيز عُنصر div و إعطائه بعض التنسيقات المبدئية، تحديد العُنصر من خلال جافاسكربت و التسمع لحدث click لمُعالجته:

Html:

<div class="original">
  
</div>

Css:

div.original{
  background-color: pink;
  height: 50px;
  border: 1px solid #333;
  margin-bottom: 10px;
}

JS:

var originalDiv = document.getElementsByClassName('original')[0]; // تحديد العُنصر الاصلي

originalDiv.addEventListener("click", cloneDiv); // التسمع لحدث الضغط على العُنصر

/* دالة مُعالجة الحدث */
function cloneDiv() {
  console.log('cloned');
}

الآن إذا ضغطت على العُنصر في كل مرة ستجد في القنصل عبارة cloned، المفروض هذا الجزء أنت من يقوم به، و ترفقه مع السؤال.

• كتابة منطق الدالة cloneDiv لمُعالجة حدث الضغط على الdiv الأصلي، سنستخدم التابع cloneNode لنسخ العُنصر، و الدالة randColor التي أنشأناها في الخطوة الأولى لتغيير اللون، و في الأخير نضيف العُنصر المنسوخ إلى ال body بإستخدام التابع appendChild :

function cloneDiv() {
  let clonedDiv = originalDiv.cloneNode(true); // نسخ العُنصر الأصلي و الإحتفاظ به في متغير محلي
  
  clonedDiv.style.backgroundColor = randColor(); // تغيير لون الخلفية للعُنصر المنسوخ
  
  document.body.appendChild(clonedDiv); // إضافته لجسم الصفحة
}

يُمكنك تجربة المثال من خلال codepen على الرابط التالي: