Vanilla JavaScript ব্যবহার করে বাটন ক্লিকে অ্যারে এলিমেন্ট DIV-এ দেখানো

ভূমিকা

ওয়েব ডেভেলপমেন্টে প্রায়শই অ্যারে ডেটা HTML-এ ডাইনামিকভাবে দেখাতে হয়। এই টিউটোরিয়ালে আমরা Vanilla JavaScript (কোনো লাইব্রেরি ছাড়া) ব্যবহার করে বাটন ক্লিকে অ্যারে এলিমেন্টগুলো একটি DIV-এ দেখানোর পদ্ধতি শিখব।

বেসিক কনসেপ্ট

const myArray = ["stone", "paper", "scissors"];

const embedElements = () => {
  myArray.forEach(element => {
    document.getElementById('result').innerHTML += 
      `
${element}

`;
  });
};

সম্পূর্ণ কোড উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>অ্যারে এলিমেন্ট দেখানো</title>
  <style>
    body { font-family: Arial, sans-serif; padding: 20px; }
    #result div { margin: 5px 0; padding: 10px; background: #f0f0f0; }
    button { padding: 10px 20px; font-size: 16px; cursor: pointer; }
  </style>
</head>
<body>
  <div id="result"></div>
  <button onclick="embedElements()">ডেটা দেখান</button>
  
  <script>
    const myArray = ["stone", "paper", "scissors"];
    
    function embedElements() {
      myArray.forEach(el => {
        document.getElementById('result').innerHTML += 
          `
${el}

`;
      });
    }
  </script>
</body>
</html>

কোড ব্যাখ্যা

1. HTML কাঠামো: একটি খালি DIV (id="result") এবং একটি বাটন
2. অ্যারে: myArray তিনটি স্ট্রিং ধারণ করে
3. ফাংশন: embedElements() বাটন ক্লিকে কল হয়
4. forEach লুপ: প্রতিটি এলিমেন্টের জন্য DIV তৈরি করে innerHTML-এ যুক্ত করে

উন্নত সংস্করণ (রিপিট ক্লিক হ্যান্ডলিং)

function embedElements() {
  const container = document.getElementById('result');
  
  // পূর্বের কন্টেন্ট ক্লিয়ার করুন (ঐচ্ছিক)
  // container.innerHTML = '';
  
  myArray.forEach(el => {
    const div = document.createElement('div');
    div.textContent = el;
    div.style.margin = '5px 0';
    div.style.padding = '10px';
    div.style.background = '#f0f0f0';
    container.appendChild(div);
  });
}

আধুনিক পদ্ধতি (Template Literals + join)

function embedElements() {
  const container = document.getElementById('result');
  container.innerHTML = myArray
    .map(el => `
${el}
`)
    .join('
');
}

সেরা অনুশীলন (Best Practices)

• innerHTML += এড়ান: বড় ডেটার জন্য document.createElement() বা DocumentFragment ব্যবহার করুন
• XSS প্রতিরোধ: ইউজার ইনপুট হলে textContent ব্যবহার করুন
• ইভেন্ট ডেলিগেশন: একাধিক বাটন হলে কমন প্যারেন্টে লিসেনার যোগ করুন
• রিপিট ক্লিক হ্যান্ডল: ডাবল ক্লিক রোধের জন্য ফ্ল্যাগ বা ডিসেবল ব্যবহার করুন

আউটপুট

বাটন ক্লিক করলে "stone", "paper", "scissors" তিনটি আইটেম আলাদা আলাদা DIV-এ দেখাবে। প্রতিটি ক্লিকে নতুন আইটেম যোগ হবে (যদি ক্লিয়ার না করা হয়)।