কীভাবে জাভাস্ক্রিপ্টের সাথে বোতামগুলি সক্ষম এবং নিষ্ক্রিয় করবেন (রাষ্ট্রের উপর ভিত্তি করে)

একটি ইনপুট ক্ষেত্র খালি আছে কিনা তার উপর ভিত্তি করে বোতামগুলি কীভাবে নিষ্ক্রিয় বা সক্ষম করবেন তা শিখুন৷

আপনি যখন ওয়েবে ফর্মগুলি পূরণ করেন তখন আপনি লক্ষ্য করবেন যে প্রায়শই আপনি সমস্ত বা কিছু পাঠ্য ক্ষেত্র (প্রয়োজনীয় ক্ষেত্র) পূরণ না হওয়া পর্যন্ত ফর্ম জমা দিতে পারবেন না। একই নীতি চেকবক্স এবং রেডিও বোতামের ক্ষেত্রে প্রযোজ্য।

আপনার ইনপুট ক্ষেত্র খালি আছে কিনা তার উপর ভিত্তি করে আপনার বোতামের অবস্থা (সক্ষম বনাম অক্ষম) কীভাবে নিয়ন্ত্রণ করবেন তা এখানে রয়েছে৷

HTML

আপনার সম্পাদকে নিম্নলিখিত HTML যোগ করুন:

<input class="input" type="text" placeholder="fill me" />
<button class="button">Click Me</button>

জাভাস্ক্রিপ্ট

নিম্নলিখিত জাভাস্ক্রিপ্ট যোগ করুন

let input = document.querySelector(".input")
let button = document.querySelector(".button")

button.disabled = true

input.addEventListener("change", stateHandle)

function stateHandle() {
  if (document.querySelector(".input").value === "") {
    button.disabled = true
  } else {
    button.disabled = false
  }
}

এখন আপনার কাছে একটি বোতাম রয়েছে যা আপনার ইনপুট ক্ষেত্রটি খালি থাকা পর্যন্ত নিষ্ক্রিয় থাকে এবং আপনি এটি পূরণ করা শুরু করার সাথে সাথে সক্ষম হয়৷

সমস্ত কাজের কোড সহ ডেমো দেখুন।

ডেমো কোড।

এইচটিএমএল এবং জাভাস্ক্রিপ্ট কোড কিভাবে কাজ করে

প্রথমত, আমরা কয়েকটি HTML উপাদান, একটি ইনপুট ক্ষেত্র এবং একটি বোতাম সংজ্ঞায়িত করি। তারপর আমরা প্রতিটি উপাদান input এর একটি রেফারেন্স সংরক্ষণ করতে দুটি ভেরিয়েবল তৈরি করতে জাভাস্ক্রিপ্ট ব্যবহার করি &button . এখন প্রতিটি উপাদানকে প্রোগ্রাম্যাটিকভাবে ম্যানিপুলেট করার জন্য আমাদের সম্পূর্ণ নিয়ন্ত্রণ আছে।

আমরা বোতামের অবস্থা নিষ্ক্রিয় করে শুরু করি। ডিফল্টরূপে, একটি বোতামের অবস্থা সক্ষম থাকে৷ HTML এ disabled = true ব্যবহার করে ব্যবহারকারীর জন্য UI-তে বোতামটি এখন ধূসর (অক্ষম) হয়ে গেছে।

তারপরে আমরা একটি ইভেন্ট হ্যান্ডলার সংযুক্ত করি (addEventListener ) input এ ইভেন্ট সম্পত্তি change সহ পরিবর্তনশীল , যা এমন একটি সম্পত্তি যা উপাদানগুলির সাথে মিথস্ক্রিয়ার জন্য শোনে (ঘড়ি)। এই ক্ষেত্রে, আমরা জানতে চাই যে ব্যবহারকারী কখন ইনপুট ক্ষেত্রের ভিতরে টাইপ করে তার সাথে ইন্টারঅ্যাক্ট করে, এবং তারপর একটি ফাংশন চালানোর মাধ্যমে সেই ইভেন্টে প্রতিক্রিয়া জানায়৷

আমরা যে ফাংশনটি চালাই তাকে stateHandler বলা হয় এবং ইনপুট ক্ষেত্রের ভিতরে যখনই কোন পরিবর্তন হয় তখন এটি ফায়ার হয়।

স্টেটহ্যান্ডলারের ভিতরের কোডটি বলে “যদি ইনপুট ক্ষেত্রের মান একটি খালি স্ট্রিং হয় (=== '' ) তারপর বোতামটি অক্ষম করুন, অন্যথায় (else ) এটি সক্রিয় করুন৷