কম্পিউটার টিউটোরিয়াল

জাভাস্ক্রিপ্টে 'select' এলিমেন্টে addEventListener কেন কাজ করে না?

বদলে querySelector() এবং addEventListener() একসাথে ব্যবহার করুন।

উদাহরণ

নিচে কোডটি দেওয়া হলো:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <body>    <select id="selectDemo">         <option value="Java">Java</option>         <option value="Javascript">Javascript</option>         <option value="MySQL">MySQL</option>         <option value="MongoDB">MongoDB</option>    </select> </body> <script>    document.querySelector('#selectDemo').addEventListener('change', subjectMarks);    function subjectMarks() {       console.log(58);    } </script> </html>

প্রোগ্রামটি চালানোর জন্য, ফাইলটি যেকোনো নাম দিয়ে সংরক্ষণ করুন (যেমন: index.html) এবং ফাইলটিতে ডান ক্লিক করে VS Code এডিটরে Open with live server অপশনটি নির্বাচন করুন।

এটি নিচের আউটপুটটি দেবে:

জাভাস্ক্রিপ্টে  select  এলিমেন্টে addEventListener কেন কাজ করে না?

এখন ড্রপডাউন লিস্ট থেকে ভ্যালু সিলেক্ট করুন:

জাভাস্ক্রিপ্টে  select  এলিমেন্টে addEventListener কেন কাজ করে না?

আউটপুট

এটি নিচের আউটপুটটি দেবে:

জাভাস্ক্রিপ্টে  select  এলিমেন্টে addEventListener কেন কাজ করে না?

  1. জাভাস্ক্রিপ্টে সিলেক্ট লিস্টের ভ্যালু অ্যারেতে আছে কিনা চেক করে কনসোলে দেখানো

  2. জাভাস্ক্রিপ্টে ড্রপডাউন (সিলেক্ট) সিলেক্টেড ভ্যালু কনসোলে দেখানো

  3. জাভাস্ক্রিপ্টে 'select' এলিমেন্টে addEventListener কেন কাজ করে না?

  4. জাভাস্ক্রিপ্টে ID দিয়ে এলিমেন্ট রিমুভ করা