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

জাভাস্ক্রিপ্ট: HTML বাটনে ক্লিক করলে অ্যালার্ট (alert) দেখানো


বাটনে ক্লিক করলে অ্যালার্ট ফায়ার করতে addEventListener() ব্যবহার করুন। মনে করুন HTML ওয়েব পেজে নিচের বাটনটি আছে −

<button type="button">Please Press Me</button>

উদাহরণ

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

<!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>    <button type="button">Please Press Me</button> </body> <script>    var pressedButton = document.getElementsByTagName("button")[0];    pressedButton.addEventListener("click", function (event) {       alert("You have pressed the button..........")    }) </script> </html>

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

আউটপুট

আউটপুট নিচের মত −

জাভাস্ক্রিপ্ট: HTML বাটনে ক্লিক করলে অ্যালার্ট (alert) দেখানো

যখন বাটনটি প্রেস করবেন, অ্যালার্ট মেসেজ দেখাবে।

আউটপুট

আউটপুট নিচের মত −

জাভাস্ক্রিপ্ট: HTML বাটনে ক্লিক করলে অ্যালার্ট (alert) দেখানো


  1. জাভাস্ক্রিপ্টে বাটন ক্লিক করলে ১০ করে মান বাড়ানো

  2. জাভাস্ক্রিপ্টে onclick() দিয়ে ফাংশন কল করা

  3. জাভাস্ক্রিপ্ট দিয়ে টু-ডু লিস্ট তৈরি করা

  4. HTML-এ ফাইল আপলোড বাটন কীভাবে তৈরি করবেন?