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

জাভাস্ক্রিপ্টে color টাইপ ইনপুটে onchange ইভেন্ট কাজ না করার সমস্যা


onchange ইভেন্টটি তখন ট্রিগার হয় যখন একটি এলিমেন্ট পরিবর্তন হয়। নিচের সিনট্যাক্স ব্যবহার করতে হবে।

onchange="yourFunctionName(this);"

উদাহরণ

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <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> </head> <body> <p> <label for="color">Choose Color</label> <input type="color" id="selectedColor" value="#985d5d" onchange="showValue(this);" /> </p> <script>    function showValue(c){       console.log(c.value);    } </script> </body> </html>

উপরোক্ত প্রোগ্রাম চালাতে, ফাইলের নাম anyName.html(index.html) হিসেবে সেভ করুন এবং ফাইলে রাইট-ক্লিক করে VS Code এডিটরে "Open with Live Server" অপশন সিলেক্ট করুন।

আউটপুট

জাভাস্ক্রিপ্টে color টাইপ ইনপুটে onchange ইভেন্ট কাজ না করার সমস্যা

color টাইপ ইনপুটে ক্লিক করার পর কনসোলে কালার ভ্যালু পাওয়া যাবে −

জাভাস্ক্রিপ্টে color টাইপ ইনপুটে onchange ইভেন্ট কাজ না করার সমস্যা

  1. জাভাস্ক্রিপ্টে ফাংশনের রেজাল্ট HTML আকারে দেখানো

  2. জাভাস্ক্রিপ্টে মাউস ক্লিকের সাথে সাথে ইভেন্ট ট্রিগার করা (মাউস ছাড়ার পর না)

  3. HTML-এ কালার পিকার সহ ইনপুট টাইপ ফিল্ড কীভাবে ব্যবহার করবেন?

  4. HTML DOM Input Color type প্রোপার্টি