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

জাভাস্ক্রিপ্টে বাটন ক্লিকে অ্যারে আইটেমগুলো রিভার্স ক্রমে একটা করে দেখানো

ধরুন আমাদের অ্যারেটি নিচের মতো:

var listOfNames = [
  'John',
  'David',
  'Bob'
];

আমাদের বাটনটি নিচের মতো:

<button id="reverse" onclick="reverseTheArray()">Click The Button To get the Reverse Value</button>

এখন, অ্যারে আইটেমগুলো রিভার্স ক্রমে পেতে, প্রথমে অ্যারে লেথে পৌঁছাতে হবে এবং লেথেটি ১ কমানো হবে। তারপর সেই নির্দিষ্ট ইনডেক্সের কন্টেন্টটি রিভার্স ক্রমে প্রিন্ট করুন।

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=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>
<div align="center" id='reverseTheArray'></div>
<button id="reverse" onclick="reverseTheArray()">Click The Button To get the Reverse Value</button>
<script>
  var listOfNames = [
    'John',
    'David',
    'Bob'
  ];
  count=listOfNames.length-1;
  function reverseTheArray(){
    document.getElementById('reverseTheArray').innerHTML =
    listOfNames[count];
    count--;
    if (count<0)
      count=listOfNames.length-1;
  }
</script>
</body>
</html>

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

আউটপুট

এটি নিচের আউটপুটটি তৈরি করবে:

জাভাস্ক্রিপ্টে বাটন ক্লিকে অ্যারে আইটেমগুলো রিভার্স ক্রমে একটা করে দেখানো

Step 1

যখন আপনি বাটনে ক্লিক করবেন, আপনি অ্যারেটির শেষ মানটি পাবেন। এটি নিচের আউটপুট তৈরি করবে:

জাভাস্ক্রিপ্টে বাটন ক্লিকে অ্যারে আইটেমগুলো রিভার্স ক্রমে একটা করে দেখানো

Step 2

আরেকবার বাটনে ক্লিক করলে আপনি দ্বিতীয় শেষ মান পাবেন। এটি নিচের আউটপুট তৈরি করবে:

জাভাস্ক্রিপ্টে বাটন ক্লিকে অ্যারে আইটেমগুলো রিভার্স ক্রমে একটা করে দেখানো

  1. জাভাস্ক্রিপ্ট অ্যারে থেকে স্ট্রিং পার্স করা

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

  3. জাভাস্ক্রিপ্টে বাটন ক্লিকে div লুকানো

  4. JavaScript-এ বাটন ক্লিকে li এলিমেন্ট রিমুভ করা